skills.rest
thimmarques
thimmarquesCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide web interface design with structured UX principles and accessibility audits.

Updated Aug 23, 2026
Search Tags:#typography#accessibility#design-thinking#color-system#motion-design#ux-principles
One-click install
npx skills add https://github.com/thimmarques/gestao-inteligente --skill frontend-design-thimmarques
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/thimmarques/gestao-inteligente/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/thimmarques/gestao-inteligente --skill frontend-design-thimmarques

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Design teams struggle to apply consistent, principled guidance to UI decisions, leading to drift and inconsistent accessibility outcomes.

Core Features & Use Cases

  • Principles-driven guidance for color, typography, UX psychology, motion, and accessibility.
  • Design audits and decision templates ready to adapt for projects, teams, and design systems.
  • Quick-start prompts to generate design directions and evaluate trade-offs across pages, components, and layouts.

Quick Start

Provide a project brief (context, audience, and constraints) and I will generate a principled design direction following the frontend-design framework.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I apply UX principles and design thinking to web interfaces?▼

Apply UX principles to web interfaces using a structured framework that guides design decisions on color systems, typography, and motion. It provides decision templates and audits to ensure consistent accessibility outcomes across dashboards and marketing sites.

How do I audit accessibility compliance and color systems for a web application?▼

Audit accessibility compliance by evaluating color systems, typography, and visual effects against structured UX principles. The framework provides decision templates and design audits to identify accessibility gaps and ensure safe usage across product applications.

What is the best way to generate a principled design direction for a product UI?▼

Generate a principled design direction by providing a project brief with context, audience, and constraints. The framework evaluates trade-offs across pages and components to produce a UI direction based on UX psychology and motion design principles.

Do I need a specific design tool to use these UX principles for layout and typography?▼

No specific design tool is required. The framework operates independently using quick-start prompts and structured YAML frontmatter schemas, supplying deterministic tasks and on-demand references to guide layout and typography decisions.

Can I use this framework to evaluate motion design and visual effects across marketing sites?▼

Yes, you can use it to evaluate motion design and visual effects across marketing sites. It provides principles-driven guidance and auditing capabilities to ensure visual effects align with established UX psychology and accessibility compliance standards.

Related Skills

Explore More Design & Creative Skills→
soeiroosoeiroo

design-brief

Create structured design briefs with problem statements, audience, constraints, and success criteria.

Community
Intermediate
ViewWayViewWay

frontend-design

Defines visual identity and generates frontend code with specified typography, color, and motion constraints.

Community
Advanced
endlessblinkendlessblink

dev-implement-ui-ux

Organize UI/UX design into a repeatable process with design tokens and WCAG 2.2.

Community
Advanced
lord-vinayaklord-vinayak

playwright-accessibility-auditor

Automate browser accessibility testing with axe-core and Playwright.

Community
Advanced