Skip to content
China Explained

Frontend and Design Skills

Frontend and Design Skills

Section titled “Frontend and Design Skills”

Skills for UI composition, framework patterns, design reviews, and frontend implementation decisions.

Use this category when you know the broad job but still need to decide which skill is worth invoking. Start from the task, then check the source, dependency, first run, and exit conditions.

Skills in this category

Section titled “Skills in this category”
SkillBest forSource
Frontend SkillEnforces composition-first frontend work with stronger layout, imagery, hierarchy, and motion constraints.officialskills.sh
Frontend Design SkillGuides frontend design and UI/UX development work.officialskills.sh
Web Design Guidelines SkillApplies Vercel-style web design guidelines and standards.officialskills.sh
React Best Practices SkillReviews and writes React code with modern patterns and practical constraints.officialskills.sh
Next.js Best Practices SkillApplies recommended Next.js patterns and implementation guidance.officialskills.sh
Angular Developer SkillGenerates Angular code and architectural guidance for components, services, and reactivity.github.com
Expo Building Native UI SkillBuilds native UI with Expo Router, styling, components, navigation, and animation patterns.officialskills.sh

How to choose

Section titled “How to choose”
  • Turn vague UI requests into concrete layout, interaction, and implementation choices.
  • Review frontend code against framework-specific patterns.
  • Avoid generic layouts by forcing design constraints before writing components.

Avoid this category when

Section titled “Avoid this category when”
  • The task is purely backend or infrastructure work.
  • A human designer has provided precise specs that should be followed literally.
  • The page needs content strategy before visual implementation.

Decision table

Section titled “Decision table”
CheckGuidance
Main dependencyProject UI stack, design context, or framework version
Best first useApply it to one screen, component, or design decision before broad refactors.
Smallest safe scopeStart with a low-risk example, preview environment, small file, or read-only target so the result can be reviewed.
When to switchIf the task falls outside this category’s real boundary, go back to the Awesome Skills overview and choose a closer category.

Reading order

Section titled “Reading order”
  1. Frontend Skill - Enforces composition-first frontend work with stronger layout, imagery, hierarchy, and motion constraints.
  2. Frontend Design Skill - Guides frontend design and UI/UX development work.
  3. Web Design Guidelines Skill - Applies Vercel-style web design guidelines and standards.
  4. React Best Practices Skill - Reviews and writes React code with modern patterns and practical constraints.
  5. Next.js Best Practices Skill - Applies recommended Next.js patterns and implementation guidance.
  6. Angular Developer Skill - Generates Angular code and architectural guidance for components, services, and reactivity.
  7. Expo Building Native UI Skill - Builds native UI with Expo Router, styling, components, navigation, and animation patterns.

Nearby categories

Section titled “Nearby categories”

Sources

Section titled “Sources”