Translate design briefs into frontend interfaces and components.
npx skills add https://github.com/dotruru/claudemd --skill frontend-design-dotruru
Please help me install this Agent Skill. Skill: frontend-design Source: https://github.com/dotruru/claudemd/tree/main/skills/frontend-design Command: npx skills add https://github.com/dotruru/claudemd --skill frontend-design-dotruru
This skill helps teams create distinctive, production-grade frontend interfaces with intentional aesthetics and robust implementation, avoiding generic AI visuals.
Design and implement a distinctive frontend UI for a dashboard with bold typography and a dark theme, matching a given spec.
High-intent search queries and answers about installing and using this skill.
To generate production-ready frontend UI from a design brief, this skill translates specifications into cohesive interfaces and reusable components. It handles typography, color, layout, motion, and accessibility constraints while supporting HTML/CSS/JS, React, or Vue frameworks.
You can build a dashboard UI with React that avoids generic AI visuals by applying bold aesthetic directions. This skill generates responsive cards, charts, and navigation components while maintaining a unique visual identity and intentional design system.
This frontend design tool supports Vue, HTML/CSS/JS, and React frameworks. It translates design briefs into production-grade code, delivering pages and reusable components with robust implementation that match your intended aesthetic direction and performance constraints.
The best way to ensure visual consistency and accessibility in frontend components is to apply a cohesive visual system. This skill handles typography, color, motion, and layout constraints to guarantee deliverables match your aesthetic direction and accessibility requirements.
Motion design integrates into frontend web app development through cohesive visual system application. This skill translates your design brief into production-ready interfaces, applying intentional motion constraints alongside typography and layout to ensure distinctive web apps.
Limitations when generating landing pages involve framework and performance constraints. While this frontend design approach translates briefs into distinctive, robust interfaces, deliverables are bound by your specified framework options like HTML/CSS/JS, React, or Vue, and required visual consistency.
jarredkennyDefine typography, color systems, motion, and layout for frontend interfaces.
rhuangabrielsantosGenerate distinctive frontend interfaces in HTML/CSS/JS, React, or Vue.
xingBaGanImplement Disney's 12 animation principles in React with Framer Motion.
abhay-ranaCreate production-grade frontend interfaces with cohesive visual identity and UI tokens.
