Create distinctive frontend interfaces with HTML, CSS, and JS artifacts.
npx skills add https://github.com/runkids/my-skills --skill frontend-design-runkids
Please help me install this Agent Skill. Skill: frontend-design Source: https://github.com/runkids/my-skills/tree/main/frontend-design Command: npx skills add https://github.com/runkids/my-skills --skill frontend-design-runkids
This Skill guides teams to craft distinctive, production-grade frontend interfaces with a bold, intentional aesthetic and rigorous implementation standards, reducing design drift and delivering polished user experiences.
Use the frontend-design skill to craft a distinctive landing page with a bold visual system.
High-intent search queries and answers about installing and using this skill.
Create a cohesive visual identity by defining a typography system, color palette, and motion language, then implement them as production-grade HTML/CSS/JS components with accessibility and performance built in. This approach reduces design drift and ensures consistency across your interface.
Design a purposeful aesthetic direction first—including typography, color, and motion—then translate it into accessible, maintainable HTML/CSS/JavaScript artifacts. This ensures your components are both visually distinctive and ready for deployment.
Establish a unified design system covering typography, color, and motion, then build your component library to enforce that system throughout. This delivers a cohesive aesthetic across all pages and dashboards while maintaining accessibility and performance standards.
Yes. Layer intentional typography choices, a custom color palette, and purposeful motion language into your CSS and JavaScript to create distinctive visual impact. This transforms a standard layout into a polished, branded experience that stands apart.
Bold aesthetics—distinctive typography, color, and motion—must be paired with accessibility compliance, performance optimization, and maintainable code. This balance delivers visually striking interfaces that are genuinely usable and sustainable at scale.
A design system is essential for maintaining visual coherence at scale. It codifies your typography, color, and motion choices, ensuring every component, page, and dashboard reflects your intended aesthetic while staying accessible and performant.
mike-coulbournTranslate brand strategy into visual identity direction with mood boards and logo briefs.
andebet07-ossProvide structured feedback on usability, visual hierarchy, consistency, and accessibility.
omardelarosaGenerate production-ready frontend interfaces from design intent across HTML/CSS/JS, React, or Vue.
nuxtProvide over 125 Vue components for Nuxt, Vite, Laravel, and AdonisJS.
