Translate UI design goals into token-driven frontend design systems.
npx skills add https://github.com/jjyaoao/HelloAgents --skill frontend-design-jjyaoao
Please help me install this Agent Skill. Skill: frontend-design Source: https://github.com/jjyaoao/HelloAgents/tree/main/skills/frontend-design Command: npx skills add https://github.com/jjyaoao/HelloAgents --skill frontend-design-jjyaoao
Front-end teams often struggle to translate vague design requests into consistent, accessible, and maintainable UI code across projects.
Provide a starting point by generating design tokens, components, and templates to bootstrap a production-ready frontend design system.
High-intent search queries and answers about installing and using this skill.
A tokens-first design system drives visuals from semantic tokens, ensuring consistent typography, spacing, color, and elevation across your project. It provides TypeScript implementations and comprehensive component coverage for maintainable architecture.
You can generate accessible UI components for dashboards by using primitives that cover default, hover, focus, active, disabled, loading, empty, and error states. This ensures comprehensive stateful behavior for admin panels and component libraries.
Yes, this approach provides TypeScript typings and Tailwind-ready templates alongside tokens.css, components.css, and utilities.css outputs. It supports React, Vue, Svelte, and Next.js projects for building reusable UI libraries.
The best way to structure design tokens for a scalable component library is using a tokens-first approach that defines semantic token layers. This satisfies design-token definitions and enables token-driven styling across all UI components.
Yes, you can use this frontend design system for React, Vue, Svelte, and Next.js projects. It provides TypeScript implementations and comprehensive component coverage suitable for building reusable UI libraries and design systems across these frameworks.
Frontend teams struggle with vague design requests when lacking a tokens-first design system. Without semantic tokens driving typography, spacing, color, and elevation, maintaining consistent and accessible UI code across projects becomes difficult.
moshi-azzManage design tokens and generate slides from component specifications.
mayankmishra0403Transform UI requirements into token-based frontend design systems.
ananthapallivignesh200567Provide Tailwind CSS patterns for responsive layouts, cards, navigation, forms, and typography.
qodex-aiDesign accessible UIs with component libraries and generate React code with Tailwind CSS.
