skills.rest
lc0rp
lc0rpCOMMUNITY
Explore all skills by this author →
Website𝕏@lukekyohereGitHub

frontend-web-design

Enforce composition-first design and explicit visual direction for frontend UI.

Updated Aug 27, 2026
Search Tags:#ui#accessibility#frontend#composition#tokens#design-direction#mood-board
One-click install
npx skills add https://github.com/lc0rp/luke-agent-scripts --skill frontend-web-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-web-design
Source: https://github.com/lc0rp/luke-agent-scripts/tree/main/skills/frontend-web-design
Command: npx skills add https://github.com/lc0rp/luke-agent-scripts --skill frontend-web-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend UI work often suffers from generic AI aesthetics and inconsistent hierarchy; this skill enforces composition-first design, explicit visual direction, and narrative page structure to deliver polished, product-appropriate interfaces.

Core Features & Use Cases

  • Start with composition, not components; pick an explicit visual direction; freeze a small design system early.
  • Use screenshots, mood boards, or generated visuals as guardrails; structure the page or screen as a narrative; apply design tokens and real components; verify accessibility and responsive behavior.
  • Use cases include redesigns of dashboards, landing pages, marketing sites, and complex web apps requiring consistent UI language and strong visual hierarchy.

Quick Start

Generate three distinct visual directions for the target screen and provide a visual thesis, content plan, and interaction thesis for the strongest direction.

Frequently Asked Questions about frontend-web-design

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

FAQPage Schema
How do I avoid generic AI aesthetics in frontend web design?▼

Improve frontend UI quality by starting with composition rather than components, enforcing explicit visual direction, narrative page structure, and design tokens to prevent generic AI aesthetics and inconsistent hierarchy in web apps.

What is composition-first design for web apps?▼

Composition-first design prioritizes page structure and narrative over individual components, freezing a small design system with explicit visual direction and design tokens to deliver consistent UI language and strong visual hierarchy for complex interfaces.

How do I redesign a dashboard with consistent UI hierarchy?▼

Redesign dashboards with consistent UI hierarchy by generating distinct visual directions, selecting the strongest for a visual thesis, applying real components with design tokens, and verifying accessibility and responsive behavior through screenshot-driven checks.

How do you use mood boards and screenshots as design guardrails?▼

Use mood boards, screenshots, or generated visuals as design guardrails by aligning them with an explicit visual direction, visual thesis, and content plan to enforce visual hierarchy and narrative structure throughout the frontend UI polish process.

Does this UI design approach include accessibility checks?▼

Yes, this UI design approach includes accessibility checks and verifies responsive behavior through screenshot-driven verification, ensuring the final web app interface satisfies accessibility requirements alongside its visual thesis and design tokens.

When do I need explicit visual direction for a landing page?▼

You need explicit visual direction for a landing page when the interface requires strong visual hierarchy and consistent UI language to avoid generic AI aesthetics, establishing a visual thesis and content plan before applying design tokens.

Related Skills

Explore More Design & Creative Skills→
gopforevergopforever

branding-generator

Generate three brand directions with color, typography, and logo concepts.

Community
Advanced
eysenfalkeysenfalk

frontend-ui-ux

Transforms design briefs into accessible, reusable UI components with tokens and layouts.

Community
Advanced
arn0ld87arn0ld87

frontend-design-agency

Expertly manages frontend design workflows, ensuring consistent branding and UX across deliverables.

Community
Advanced
Higashi-KotaHigashi-Kota

senior-ui-designer

Provide UI/UX design guidance for SaaS interfaces with WCAG 2.2 AA accessibility.

Community
Basic