skills.rest
Karanjot786
Karanjot786COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Translate design briefs into production-grade frontend interfaces with HTML/CSS/JS or React and Vue.

236|234|Updated Feb 21, 2026
Search Tags:#typography#accessibility#frontend-design#motion-design#design-guidance#color-theme#ui-aesthetics
One-click install
npx skills add https://github.com/Karanjot786/TermUI --skill frontend-design-karanjot786
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Karanjot786/TermUI/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/Karanjot786/TermUI --skill frontend-design-karanjot786

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers and developers craft distinctive, production-grade frontend interfaces with an intentional aesthetic direction, avoiding generic AI aesthetics and delivering working code.

Core Features & Use Cases

  • Bold design direction: translate arbitrary briefs into cohesive UI concepts with typography, color, motion, and layout.
  • Production-grade implementation: produce HTML/CSS/JS or framework components (React/Vue) that are ready to integrate.
  • Accessibility and polish: ensure accessible contrast, keyboard navigation, and refined details for real-world apps.

Quick Start

Provide a frontend brief including target audience, constraints, and preferred tech stack, and I will generate a complete, production-ready UI implementation.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-grade frontend UI from a design brief?▼

To generate production-grade frontend UI, provide a brief specifying your target audience, constraints, and tech stack to receive cohesive interfaces with typography, color systems, and ready-to-deploy code.

Can I build accessible React and Vue components for real-world apps?▼

Yes, you can build accessible React and Vue components that satisfy functional requirements for keyboard navigation, accessible contrast, and refined details suitable for real-world apps.

What's the best way to avoid generic AI aesthetics in frontend design?▼

Avoiding generic AI aesthetics requires translating arbitrary briefs into cohesive UI concepts with intentional aesthetic direction across typography, color themes, motion design, and layout.

Does this frontend design approach support vanilla HTML/CSS/JS or modern frameworks?▼

This frontend design approach supports both vanilla HTML/CSS/JS and modern frameworks like React and Vue, producing framework-specific component generation guidance ready for integration.

How to ensure cohesive color systems and responsive layouts in component generation?▼

Ensuring cohesive color systems and responsive layouts involves translating design briefs into distinctive interfaces that satisfy functional requirements for accessible typography and motion across target devices.

Why does my generated dashboard UI lack distinctive motion design and polish?▼

Dashboard UI lacking distinctive motion design and polish often results from missing aesthetic direction in the brief; specifying motion constraints ensures refined details and accessible interfaces.

Related Skills

Explore More Design & Creative Skills→
Owl-ListenerOwl-Listener
2.0k

design-brief

Define and document a design brief with problem space, audience, constraints, and success criteria.

Community
Intermediate
OneWave-AIOneWave-AI
245

screenshot-to-code

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

Official
Advanced
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
Artag-ChrisArtag-Chris
1

frontend-design

Align frontend projects with a distinctive design direction and high-quality UI execution.

Community
Advanced