skills.rest
Haslien
HaslienCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Guide consistent frontend design and implementation across React, Vue, or vanilla setups.

Updated Mar 25, 2026
Search Tags:#design#ui#accessibility#frontend#react#vue#aesthetics
One-click install
npx skills add https://github.com/Haslien/My-Claude-Skills --skill frontend-design-haslien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Haslien/My-Claude-Skills/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/Haslien/My-Claude-Skills --skill frontend-design-haslien

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building modern frontend interfaces that are visually distinctive, accessible, and maintainable often requires a dedicated framework for design direction and implementation. This skill provides a structured approach to define aesthetic direction, translate it into reusable components, and ensure production-quality code across frameworks.

Core Features & Use Cases

  • Design Direction: Establish a bold, cohesive visual direction and translate it into reusable UI patterns, tokens, and components.
  • Implementation Guidance: Deliver production-grade HTML/CSS/JS patterns with accessibility and responsive behavior across React, Vue, or vanilla setups.
  • Use Case: Create a marketing site or application with a unique aesthetic and a scalable UI system that remains consistent across pages.

Quick Start

Provide a design brief and implement a production-ready frontend component based on the user's requirements.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade frontend interfaces that are visually distinctive?▼

To build production-grade frontend interfaces, you provide a design brief and the skill translates it into cohesive visual direction, reusable components, and accessible HTML/CSS/JS patterns across React, Vue, or vanilla setups.

What's the best way to establish a cohesive UI design system for a React application?▼

Establish a cohesive UI design system by defining a bold aesthetic direction and translating it into reusable UI patterns, tokens, and components to ensure a scalable and consistent interface across pages.

Does this frontend design approach work with Vue and vanilla JavaScript setups?▼

Yes, the approach works with Vue and vanilla JavaScript setups. It delivers production-grade HTML, CSS, and JS patterns with enforced accessibility and responsive behavior across React, Vue, or vanilla frameworks.

How do I ensure my web components are accessible and responsive?▼

Ensure web components are accessible and responsive by enforcing accessibility standards and responsive layouts as core features during implementation, guaranteeing production-quality code across your chosen framework.

Why do my frontend interfaces lack a clear aesthetic direction and reusable components?▼

Frontend interfaces lack a clear aesthetic direction when built without a structured design framework. Translating a bold visual direction into reusable components and tokens solves this, ensuring maintainability and consistency across pages.

Can I use this skill to create a marketing site with a unique aesthetic?▼

Yes, you can create a marketing site with a unique aesthetic. The skill guides the creation of applications with a distinctive visual direction and a scalable UI system that remains consistent across pages.

Related Skills

Explore More Design & Creative Skills→
lpgnlpgn

frontend-design

Turn design briefs into accessible frontend interfaces for React, Vue, or HTML/CSS.

Community
Advanced
KARENLHAOKARENLHAO
1

frontend-design

Generate frontend interfaces and components with HTML/CSS, React, or Vue.

Community
Advanced
DrLuggelsDrLuggels
3

web-component-design

Guide reusable web component design with React, Vue, and Svelte patterns.

Community
Intermediate
EstebanForgeEstebanForge
4

design-taste-frontend

Enforce strict frontend design standards for AI-generated interfaces using Tailwind CSS.

Community
Advanced