skills.rest
aymenhamoudii
aymenhamoudiiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-ready frontend interfaces with OKLCH color tokens and fluid typography.

Updated Mar 21, 2026
Search Tags:#typography#design#ui#accessibility#frontend#responsive#motion
One-click install
npx skills add https://github.com/aymenhamoudii/digitn-website --skill frontend-design-aymenhamoudii
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/aymenhamoudii/digitn-website/tree/main/.qwen/skills/frontend-design
Command: npx skills add https://github.com/aymenhamoudii/digitn-website --skill frontend-design-aymenhamoudii

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates generic, templated UI outputs and guides creation of distinctive, production-ready frontend interfaces that combine strong aesthetics with accessible, maintainable code. It ensures designs are context-aware, technically feasible, and avoid the common visual fingerprints of AI-generated "slop."

Core Features & Use Cases

  • Context-first workflow: Enforces gathering target audience, use cases, and brand personality before any design work.
  • Aesthetic & technical guidelines: Provides rules for typography, color (OKLCH), spacing, motion, interaction, and responsive/container query patterns.
  • Production-ready deliverables: Produces working HTML/CSS patterns, component recommendations, accessibility considerations, and motion tokens for implementation.
  • Use Case: Turn a brief (audience, goals, brand tone) into a polished homepage hero, component library, or marketing page with fluid typography, accessible interactions, and an OKLCH-based palette.

Quick Start

Design a production-ready homepage or component by providing the target audience, primary use cases, and a concise brand personality, then request HTML/CSS with OKLCH palette, fluid typography, container queries, and accessibility-ready interactions.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create production-grade frontend interfaces that avoid generic AI aesthetics?▼

To create production-grade frontend interfaces that avoid generic aesthetics, you must enforce a context-first workflow by gathering target audience, use cases, and brand personality before applying OKLCH color tokens, fluid typography, and accessibility-focused interaction patterns.

How do I build a homepage hero with OKLCH color tokens and fluid typography?▼

Build a homepage hero with OKLCH color tokens and fluid typography by defining your brand personality and audience first, then applying the technical constraints for fluid typography scales, container query patterns, and motion tokens to generate working HTML and CSS deliverables.

What is the best way to design accessible web components using container queries?▼

The best way to design accessible web components using container queries is to apply a context-first design workflow that prioritizes OKLCH color palettes, motion tokens, and accessibility-focused interaction patterns to ensure distinctive and maintainable production-ready code.

Do I need brand personality and target audience details to generate production-ready UI code?▼

Yes, you need confirmed design context including target audience, primary use cases, and brand personality to generate production-ready UI code, because this context-first workflow prevents generic outputs and ensures your web components satisfy technical and aesthetic constraints.

Why does my generated frontend UI look like generic templated design?▼

Your generated frontend UI looks like generic templated design because it lacks confirmed design context, whereas applying a context-first workflow with OKLCH palettes, fluid typography, and motion tokens eliminates common visual fingerprints and ensures distinctive production-grade interfaces.

Related Skills

Explore More Design & Creative Skills→
owshq-mecowshq-mec
122

impeccable

Generate production-grade frontend interfaces with distinctive aesthetic quality and creative code.

Official
Advanced
Jernish-FDOJernish-FDO

frontend-design

Design and implement production-grade frontend interfaces with design-system patterns.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate
einargudnigeinargudnig

design

Generate distinctive UI designs with accessibility and production-ready handoff checklists.

Community
Advanced