skills.rest
parhumm
parhummCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Scaffold frontend UI components for React, Vue, or vanilla JS projects.

25|1|Updated Jan 29, 2026
Search Tags:#design#ui#accessibility#frontend#component#code-generation
One-click install
npx skills add https://github.com/parhumm/jaan-to --skill frontend-design-parhumm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/parhumm/jaan-to/tree/main/adapters/codex/skillpack/skills/frontend-design
Command: npx skills add https://github.com/parhumm/jaan-to --skill frontend-design-parhumm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the bridge between design and implementation by enabling rapid generation of production-ready frontend components with consistent styling and behavior.

Core Features & Use Cases

  • Component design and code scaffolding for React, Vue, or vanilla JS projects.
  • Design system alignment through tokens, typography, and color usage to ensure consistency across apps.
  • Interactive and accessible UI patterns with responsive behavior and keyboard support for dashboards, marketing pages, and admin tools.

Quick Start

Describe the desired frontend component and target framework to generate an initial design and implementation plan.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate accessible React components for a dashboard?▼

You scaffold accessible React components by describing the UI requirements and target framework, which generates production-grade code with semantic HTML, ARIA attributes, and responsive keyboard support.

What is design-token driven theming for frontend UI?▼

Design-token driven theming for frontend UI uses predefined variables for typography and color to ensure consistent styling and behavior across dashboards, landing pages, and admin tools.

Does this frontend design tool work with Vue and vanilla JS projects?▼

Yes, the frontend component generation process supports Vue and vanilla JS projects alongside React, scaffolding production-ready UI with consistent design tokens and interactive accessibility patterns.

How do I scaffold an admin tool UI with responsive keyboard support?▼

Scaffold an admin tool UI with responsive keyboard support by describing the desired component and layout, generating a design and implementation plan that satisfies ARIA attributes and accessibility considerations.

What is the best way to align my generated frontend code with a design system?▼

The best way to align generated frontend code with a design system is using token-driven outputs for typography and color usage, ensuring visual consistency across apps without manual styling adjustments.

Can I create landing page UI components without manually writing semantic HTML?▼

Yes, you can create landing page UI components without manually writing semantic HTML by specifying the component requirements, which automatically generates accessible markup with proper ARIA attributes.

Related Skills

Explore More Design & Creative Skills→
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
allenlin90allenlin90
1

task-template-builder

Documents Task Template Builder architecture for schema, drafts, drag-and-drop, and validation.

Community
Advanced