skills.rest
JustinChangTW
JustinChangTWCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-ready frontend UI, design tokens, and design systems from requirements.

Updated Aug 22, 2026
Search Tags:#accessibility#frontend#design system#dashboard#design tokens#ui design#tailwind
One-click install
npx skills add https://github.com/JustinChangTW/ai-skills-core --skill frontend-design-justinchangtw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/JustinChangTW/ai-skills-core/tree/main/skills/09-software-problem-solving/frontend-design
Command: npx skills add https://github.com/JustinChangTW/ai-skills-core --skill frontend-design-justinchangtw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? It turns vague website, Web App, or component requests into implementable frontend interfaces and design systems, preventing generic AI-slop layouts and stacked card-farm dashboards. ## Core Features & Use Cases - Tokens-first design workflow: Define design tokens, interaction states, and information architecture before writing component or page code in React, Vue, Svelte, or Tailwind. - Workbench and dashboard discipline: Enforce a single primary task per screen with task models, state models, and progressive disclosure plans. - Deterministic quality audit: Run the bundled Python audit script to check journey/flow artifacts, Gestalt principles, guideline docs, and anti-patterns. - Use Case: Ask it to design a review-tool dashboard, and it first produces a task model, state model, and visibility plan, then delivers token-based components with loading, empty, error, and accessibility states. ## Quick Start Ask the AI to design a dashboard or landing page for your product and require it to output design tokens, a task model, and responsive component code with all interaction states.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a dashboard UI without it becoming a stacked card farm?▼

Define one primary task first, then build a task model, state model, and information architecture table before any layout. Keep the first viewport to 2-3 visual groups with one primary CTA, and move reference or exception content into on-demand containers.

How to generate a design system with reusable components?▼

Start with design tokens covering color, typography, spacing, radius, shadow, and motion, then build components with all states. Reusable UI must ship with guideline docs covering Usage, Layout, Anatomy, States & Spec, Interaction, and Content.

Can I use Tailwind CSS via CDN for production frontend work?▼

No, Tailwind CDN is only acceptable for quick prototypes or disposable demos. Production delivery requires build-time integration with PostCSS so tree-shaking, token customization, and bundler support work correctly.

What frontend frameworks does this design workflow support?▼

The default stack is React with TypeScript, Tailwind CSS, and shadcn/ui, but Vue, Svelte, Angular, and vanilla HTML/CSS are supported alternatives. The workflow adapts to the existing project stack rather than forcing a new one.

When should I not use a UI design skill for a task?▼

Avoid it for pure backend APIs, algorithms, data processing, brand strategy without UI output, or single-line CSS bug fixes. Those tasks lack the systemic UI scope the workflow is designed around.

Related Skills

Explore More Design & Creative Skills→
ezjonlineezjonline
1

prompt-contract

Generate a structured Prompt Contract with goal, constraints, output format, and failure conditions.

Community
Intermediate
zenobi-uszenobi-us
68

fullstack-developer

Design and implement end-to-end features across database, API, and UI.

Official
Advanced
Owl-ListenerOwl-Listener
2.0k

heuristic-evaluation

Evaluate interfaces against Nielsen's 10 usability heuristics and document issues.

Community
Intermediate
skkarkiskkarki

frontend-design

Translate UI requirements into token-based frontend systems with TypeScript types.

Community
Advanced