skills.rest
cjennings
cjenningsCOMMUNITY
Explore all skills by this author →
Website𝕏@craigjenningsGitHub

frontend-design

Translate frontend briefs into interface directions with implementation plans.

Updated Aug 27, 2026
Search Tags:#workflow#design#ui#accessibility#frontend#components#aesthetics
One-click install
npx skills add https://github.com/cjennings/rulesets --skill frontend-design-cjennings
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/cjennings/rulesets/tree/main/frontend-design
Command: npx skills add https://github.com/cjennings/rulesets --skill frontend-design-cjennings

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Translate frontend briefs into a distinctive, production-grade interface direction with a bold aesthetic and precise implementation plan.

Core Features & Use Cases

  • Builds web components, pages, dashboards, or complete applications with a unique visual language and meticulous design decisions.
  • Guides design thinking, typography, palette, motion, and accessibility to ensure cohesive frontend experiences.
  • Provides a structured handoff with a design rationale and implementation notes for developers and stakeholders.

Quick Start

Provide a production-grade frontend component per the specified 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 frontend briefs into a production-grade interface with a bold aesthetic?▼

A production-grade frontend design workflow translates briefs into a distinctive interface direction by enforcing locked decisions on typography, palette, motion, layout, and accessibility, resulting in a complete design rationale and handoff artifacts.

What is the best way to ensure accessibility and responsive strategy are included in my frontend design?▼

Ensuring accessibility and responsive strategy in frontend design requires a workflow that enforces locked decisions on these elements alongside typography and motion, providing a structured handoff with implementation notes for developers.

Can I use this frontend design workflow for building web components and dashboards?▼

Yes, this frontend design workflow applies to building web components, pages, dashboards, or entire applications where a unique visual language and meticulous design decisions are required.

How do I generate design rationale and handoff artifacts for my UI components?▼

Generating design rationale and handoff artifacts for UI components involves applying a structured frontend design workflow that outputs precise implementation plans and design notes for stakeholders and developers.

Does this approach work for creating a unique visual language for an entire web application?▼

Yes, this approach works for creating a unique visual language for an entire web application by enforcing cohesive design decisions across typography, palette, and motion, yielding a precise implementation plan.

Related Skills

Explore More Design & Creative Skills→
connoradsconnorads
15

frontend-design

Generate production-ready HTML, CSS, and JavaScript frontend interfaces from design briefs.

Community
Basic
DayMoonDevelopmentDayMoonDevelopment
68

frontend-design

Design and implement bold frontend interfaces across React and HTML/CSS.

Official
Advanced
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic
outcomeengineeringoutcomeengineering
1

designing-frontend

Design and build distinctive frontend web interfaces with bold aesthetics.

Official
Advanced