skills.rest
cpalumbo
cpalumboCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade frontend interfaces with HTML/CSS/JS, React, or Vue.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend projects often struggle with creating distinctive, production-grade interfaces that balance aesthetics, performance, and accessibility, leading to inconsistent user experiences.

Core Features & Use Cases

  • Distinctive, production-grade UI design with a clear aesthetic direction for web apps, dashboards, landing pages, and components.
  • Framework-agnostic implementation guidance (HTML/CSS/JS, React, Vue) with accessible typography, cohesive color systems, motion, and layout guidance.
  • Use cases include building a component, a page, a dashboard, a poster, or an application that stands out with intentional design and polished details.

Quick Start

Create a production-grade frontend dashboard component with a bold, distinctive aesthetic using React or plain HTML/CSS, ensuring responsive layout and accessible typography.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a production-grade frontend dashboard with bold aesthetics?▼

Build a production-grade frontend dashboard by applying cohesive visual language, accessible typography, and responsive layout guidance using framework-agnostic HTML/CSS/JS, React, or Vue code.

Can I use this approach to generate UI components for both React and Vue?▼

Yes, you can generate distinctive UI components for React and Vue, as well as plain HTML/CSS/JS, receiving production-ready code with cohesive color systems and motion guidance.

What's the best way to ensure accessible typography and color systems in a web app?▼

Ensure accessible typography and color systems by applying cohesive visual language guidance that balances distinctive aesthetics with accessibility standards across your frontend interfaces.

Does this frontend design method work for creating landing pages and posters?▼

Yes, this frontend design method works for creating landing pages, posters, components, and full applications by providing bold aesthetic direction and polished visual details.

Why does my frontend interface lack a distinctive aesthetic direction?▼

Your frontend interface lacks a distinctive aesthetic direction when it missing cohesive visual language, intentional design choices, and polished details like motion and accessible typography.

Related Skills

Explore More Design & Creative Skills→
OneWave-AIOneWave-AI
245

screenshot-to-code

Convert UI screenshots into responsive HTML, CSS, React, or Vue code.

Official
Advanced
yolo-labs-hqyolo-labs-hq

frontend-design

Generate production-ready frontend components and pages with HTML/CSS/JS.

Official
Advanced
RussianRoulette84RussianRoulette84
1

frontend-design

Generates production-grade frontend interfaces with typography, color, motion, and accessibility guidance.

Community
Advanced
paradox123paradox123

frontend-design

Generate production-grade frontend interfaces with bold aesthetic and strict design constraints.

Community
Advanced