skills.rest
AllanYiin
AllanYiinCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Translate fuzzy UI requirements into token-based design systems and frontend patterns.

2|1|Updated Feb 1, 2026
Search Tags:#accessibility#frontend#tokens#ui-design#design-system#design-tokens#workbench
One-click install
npx skills add https://github.com/AllanYiin/Amon --skill frontend-design-allanyiin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/AllanYiin/Amon/tree/main/src/amon/resources/skills/frontend-design
Command: npx skills add https://github.com/AllanYiin/Amon --skill frontend-design-allanyiin

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Translates fuzzy UI requirements into a token-first design system and reusable frontend patterns to ensure scalable, consistent interfaces across projects.

Core Features & Use Cases

  • Token-first design: tokens -> components -> pages, enabling consistent visual language.
  • Design systems & guidelines: artifacts for tokens, states, accessibility, and governance.
  • Journey/externalization for multi-step UX: map flows (journey map, user flow, or wireflow) before polishing UI.
  • Workbench-driven delivery: primary task focus with controlled information disclosure.

Quick Start

Outline your primary task and audience, then generate a starter tokens.css and a minimal components library demonstrating token-based styling and accessible states.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I convert fuzzy UI requirements into a token-based design system?▼

Mapping multi-step UX flows before polishing UI ensures scalable user journeys. You generate journey maps, user flows, or wireflows to map externalized interactions, establishing a controlled information disclosure structure before applying visual design tokens.

Can I use design tokens to enforce accessibility and responsive behavior in web apps?▼

Design tokens separate semantic roles from component logic, enabling consistent visual language across projects. You define raw values as tokens, apply them to reusable components, and assemble pages, ensuring scalable and maintainable frontend patterns.

What is the best way to structure a scalable frontend design system for internal tools?▼

Design tokens provide a single source of truth for visual language, translating directly into production-ready frontend patterns. They ensure scalable, consistent interfaces by enforcing unified styling, accessible states, and responsive behavior across reusable components.

Do I need to map multi-step UX flows before generating UI components?▼

Mapping multi-step UX flows before polishing UI ensures scalable user journeys. You generate journey maps, user flows, or wireflows to externalize interactions, establishing a controlled information disclosure structure before applying visual design tokens.

How does a token-first pipeline improve frontend development for design-heavy projects?▼

Token-first pipelines translate raw design values into semantic variables, ensuring consistent visual language and accessible states. This approach generates scalable, reusable components and governance documentation, maintaining unified interfaces across web apps and internal tools.

Related Skills

Explore More Design & Creative Skills→
yu13130122297yu13130122297

scout

Identify uncertainties in research framing, datasets, metrics, and baselines.

Community
Intermediate
chrpacchrpac
1

doublea-brand-guidelines

Apply Double A brand guidelines to build on-brand UI across pages and dashboards.

Community
Intermediate
Canhada-LabsCanhada-Labs
2

UX & User Journeys

Map user journeys and audit information architecture for web applications.

Official
Advanced
TNHoang2708TNHoang2708
1

ck:ui-styling

Integrate shadcn/ui components and Tailwind CSS for accessible responsive interfaces.

Community
Advanced