design-style_skill

Overview

This skill helps create, improve, or restyle any frontend interface, component, or web page with a distinct, production-ready design system. It automatically selects an appropriate aesthetic (Modern Dark, Neo-brutalism, Material, etc.) and produces code and tokens that match that style. Use it whenever you ask to build, design, or style UI for web apps, landing pages, components, or dashboards.

How this skill works

When invoked for frontend work, the skill determines the tech stack, scope (component, page, or application), and any stated design preference. It maps the request to a specific design system, extracts core tokens (colors, type, spacing, shadows), and applies component patterns and signature visual elements. The output is implementation-focused: design tokens, reusable components, and brief architecture notes aligned with the chosen aesthetic.

When to use it

• Building a landing page, dashboard, or full web interface
• Creating or restyling UI components (buttons, forms, cards, modals)
• Implementing a specific aesthetic (modern, brutalist, dark, luxury, etc.)
• Working in React, Vue, Next.js, Svelte, or plain HTML/CSS
• Asking for accessible, responsive, production-ready styling
• Needing a consistent design system and centralized tokens

Best practices

• Specify your tech stack and where components will live (framework, file structure)
• State any constraints (CSS framework, design library, branding colors) up front
• Centralize tokens in CSS variables or a config so styles scale
• Preserve accessibility: color contrast, focus states, semantic markup
• Ask for prototypes or multiple style options if unsure about the aesthetic

Example use cases

• Create a neo-brutalist marketing landing page in React with reusable hero and CTA components
• Convert an existing Next.js contact form to a Modern Dark style and add responsive validation UI
• Design a SaaS dashboard using Enterprise tokens, with modular cards and a dark theme toggle
• Build a playful geometric profile card component with CSS variables and accessible markup
• Refactor scattered styles into a single design-token file and component library