Frontend Design
Generate typed UI component specs and templates across React, Vue, Svelte, or HTML with chosen styling and visual aesthetic.
Overview
Frontend Design is an agent skill for the Build phase that generates component templates from a validated spec covering framework, styling, and aesthetic enums.
Install
npx skills add https://github.com/jwynia/agent-skills --skill frontend-designWhat is this skill?
- JSON schema requires `name` (PascalCase) and `framework` with enum react, vue, svelte, html
- Component types: button, card, input, modal, navigation, hero, custom
- Styling enum: css, tailwind, css-modules, styled-components, emotion
- Aesthetic config: minimal, bold, organic, brutalist, glassmorphism, neumorphism with animation none, subtle, expressive
- 7 component type enum values including custom
- 6 aesthetic style enum values
- 4 supported frameworks: react, vue, svelte, html
Adoption & trust: 2.3k installs on skills.sh; 92 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want agent-generated UI pieces that respect framework, styling stack, and a deliberate visual language instead of inconsistent one-shot markup.
Who is it for?
Indie SaaS frontends and design-system seeds where you already know React, Vue, Svelte, or HTML plus a styling toolchain.
Skip if: Full-page information architecture, brand strategy workshops, or backend-only services with no UI surface.
When should I use this skill?
You need agent-generated UI components with explicit framework, styling, component type, and aesthetic configuration.
What do I get? / Deliverables
You get a schema-valid component specification the agent can turn into framework-aligned UI code with named type, styling, and aesthetic settings.
- Component specification JSON matching the published schema
- Framework-aligned component source from the spec
Recommended Skills
Journey fit
Build is the primary journey phase for shipping interface code; this skill targets component authoring, not distribution or analytics. Frontend is the canonical shelf because the schema centers on PascalCase components, frameworks, styling systems, and visual style enums.
How it compares
Use this structured generator instead of free-form “make a pretty button” prompts that skip framework and styling constraints.
Common Questions / FAQ
Who is frontend-design for?
Solo builders and small teams shipping web UI with agents who want PascalCase components tied to explicit framework and styling enums.
When should I use frontend-design?
During Build frontend work when you are scaffolding buttons, cards, modals, navigation, or hero sections with a chosen aesthetic and animation level.
Is frontend-design safe to install?
The skill is specification-driven generation; review the Security Audits panel on this page and inspect generated code before merging.
SKILL.md
READMESKILL.md - Frontend Design
{ "$schema": "http://json-schema.org/draft-07/schema#", "title": "Component Specification", "description": "Schema for component template generation", "type": "object", "required": ["name", "framework"], "properties": { "name": { "type": "string", "description": "Component name (PascalCase)", "pattern": "^[A-Z][a-zA-Z0-9]*$", "minLength": 1, "maxLength": 64 }, "type": { "type": "string", "description": "Component type for template selection", "enum": ["button", "card", "input", "modal", "navigation", "hero", "custom"], "default": "custom" }, "framework": { "type": "string", "description": "Target framework", "enum": ["react", "vue", "svelte", "html"] }, "styling": { "type": "string", "description": "Styling approach", "enum": ["css", "tailwind", "css-modules", "styled-components", "emotion"], "default": "css" }, "aesthetic": { "type": "object", "description": "Aesthetic configuration", "properties": { "style": { "type": "string", "description": "Visual style", "enum": ["minimal", "bold", "organic", "brutalist", "glassmorphism", "neumorphism"] }, "animation": { "type": "string", "description": "Animation level", "enum": ["none", "subtle", "expressive"], "default": "subtle" }, "darkMode": { "type": "boolean", "description": "Include dark mode support", "default": false } } }, "tokens": { "type": "string", "description": "Path to design tokens file for styling" }, "props": { "type": "object", "description": "Component props definition", "additionalProperties": { "type": "object", "properties": { "type": { "type": "string", "description": "TypeScript type" }, "default": { "type": "string", "description": "Default value" }, "required": { "type": "boolean", "description": "Whether prop is required", "default": false } }, "required": ["type"] } }, "slots": { "type": "array", "description": "Named slots (for Vue/Svelte) or children patterns (for React)", "items": { "type": "string" } }, "variants": { "type": "array", "description": "Style variants to generate", "items": { "type": "string" } } }, "examples": [ { "name": "Button", "type": "button", "framework": "react", "styling": "tailwind", "aesthetic": { "style": "bold", "animation": "subtle", "darkMode": true }, "props": { "variant": { "type": "'primary' | 'secondary' | 'ghost'", "default": "'primary'" }, "size": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }, "disabled": { "type": "boolean", "default": "false" } }, "variants": ["primary", "secondary", "ghost"] }, { "name": "Card", "type": "card", "framework": "vue", "styling": "css-modules", "aesthetic": { "style": "glassmorphism", "animation": "expressive" }, "slots": ["header", "default", "footer"], "props": { "elevated": { "type": "boolean", "default": "false" } } }, { "name": "Input", "type": "input", "framework": "svelte", "styling": "css", "aesthetic": { "style": "minimal" }, "props": { "label": { "type": "string", "required": true }, "placeholder": { "type": "string" }, "error": { "type": "stri