skills.rest
lucking7
lucking7COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guides layout, typography, color, and accessibility for frontend interfaces.

Updated Feb 6, 2026
Search Tags:#typography#design#frontend#UI#responsive#color
One-click install
npx skills add https://github.com/lucking7/factory-plugins --skill frontend-design-lucking7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/lucking7/factory-plugins/tree/main/plugins/droid-evolved/skills/frontend-design
Command: npx skills add https://github.com/lucking7/factory-plugins --skill frontend-design-lucking7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers and developers produce polished frontend interfaces.

Core Features & Use Cases

  • Guides layout decisions, typography, color systems, and accessibility to create cohesive frontends.
  • Applies to web apps, dashboards, landing pages, and reusable UI components to ensure consistency.
  • Provides actionable prompts to generate ready-to-implement UI snippets, templates, and style tokens.

Quick Start

Design a responsive landing page header with a 12-column grid, accessible color palette, and clear typography hierarchy.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I turn design concepts into polished frontend interfaces?▼

To turn design concepts into polished frontend interfaces, apply structured rules for layout, typography, color, and accessibility. This approach enforces spacing scales, type scales, and accessible color palettes to ensure cohesive web apps and landing pages.

What is an accessible color palette and type scale for responsive web design?▼

An accessible color palette and type scale for responsive web design define structured contrast ratios and font sizing hierarchies. They ensure readability across devices while maintaining clear visual hierarchy in dashboards and UI components.

Can I use this approach to generate reusable UI components and style tokens?▼

Yes, you can use this approach to generate reusable UI components and style tokens. It provides actionable prompts that output ready-to-implement UI snippets and templates, ensuring consistency across web apps and dashboards.

What's the best way to design a responsive landing page header with a 12-column grid?▼

The best way to design a responsive landing page header with a 12-column grid is to enforce clear typography hierarchy and accessible color palettes. This method guides layout decisions and ensures proper spacing scales across breakpoints.

Does this method work for creating dashboards and web app layouts?▼

Yes, this method works for creating dashboards and web app layouts by enforcing responsive rules and concrete spacing scales. It guides layout decisions and accessibility choices specifically for complex interface designs.

Related Skills

Explore More Design & Creative Skills→
jasonku09jasonku09
10

start-project

Interview users to define project scope, MVP, and core components.

Community
Intermediate
eralvarezeralvarez

frontend-design

Generate frontend interfaces from user briefs using React, Vue, or Svelte.

Community
Advanced
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
belokonmbelokonm
8

frontend-ui-ux-engineer

Transform basic React components into polished interfaces with typography, color, motion, and accessibility.

Community
Advanced