skills.rest
hasparus
hasparusCOMMUNITY
Explore all skills by this author →
Website𝕏@hasparusGitHub

frontend-design

Translate design briefs into production-grade frontend interfaces across React, Vue, and Svelte.

Updated Jan 12, 2026
Search Tags:#typography#accessibility#aesthetics#motion#ui-components#frontend-design
One-click install
npx skills add https://github.com/hasparus/claude-skills-dotfiles --skill frontend-design-hasparus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/hasparus/claude-skills-dotfiles/tree/main/frontend-design
Command: npx skills add https://github.com/hasparus/claude-skills-dotfiles --skill frontend-design-hasparus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates distinctive, production-grade frontend interfaces by translating briefs into polished code, ensuring aesthetics, usability, and maintainability without generic AI slop.

Core Features & Use Cases

  • Aesthetic-forward coding: Implement code that matches a bold design direction with careful typography, color, motion, and accessibility.
  • Component & page delivery: Produce production-ready components, pages, or entire apps across frameworks (HTML/CSS/JS, React, Vue, Svelte) with a cohesive visual identity.
  • Guided iteration: Provide design-led guidance from brief to implementation, enabling rapid prototyping and refined production-ready output.

Quick Start

Provide a distinctive frontend brief and implement a production-grade component set that matches the chosen aesthetic direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I translate a design brief into production-ready frontend components?▼

To translate a brief into frontend components, you provide the aesthetic direction and requirements. The Skill then generates production-grade code with cohesive typography, color, motion, and accessibility across your chosen framework.

Can I build frontend interfaces with React, Vue, or Svelte?▼

Yes, you can build frontend interfaces with React, Vue, Svelte, or standard HTML/CSS/JS. The Skill delivers components, pages, or full applications while maintaining a cohesive visual identity across these frameworks.

What is the best way to avoid generic AI-generated frontend code?▼

The best way to avoid generic AI frontend code is to apply aesthetic-forward coding guidelines. This ensures outputs match a bold design direction with careful attention to typography, motion, and usability without generic slop.

Does this frontend design approach include accessibility and motion guidelines?▼

Yes, frontend design includes both accessibility and motion guidelines. It combines aesthetic direction with implementation rules to ensure interactive behavior and usability are maintained alongside visual typography and color choices.

How do I iterate from a rapid prototype to a refined production-ready UI?▼

To iterate from a prototype to a production-ready UI, you use design-led guidance from the initial brief. This process enables rapid prototyping and refines the output into polished code with proper structure and interactive behavior.

Related Skills

Explore More Design & Creative Skills→
Ali1razAli1raz
1

frontend-design

Generate distinctive frontend interfaces with HTML/CSS/JS, React, or Vue code.

Community
Advanced
greencmgreencm
1

design-consultation

Generate a comprehensive design system with typography, color, layout, and motion.

Community
Advanced
mozilor-technologiesmozilor-technologies

project-architecture

Document the Webtoffee Marketing Suite's architecture, tech stack, and component hierarchy.

Official
Advanced
NaimalArain13NaimalArain13
2

figma-dashboard-components

Create reusable Figma dashboard components with layouts, navigation, and task cards.

Community
Basic