skills.rest
viasnake
viasnakeCOMMUNITY
Explore all skills by this author →
Website𝕏@viasnakeGitHub

frontend-design

Establish visual direction for web components, pages, and applications.

Updated Oct 15, 2024
Search Tags:#design#frontend#component#ui-design#ux#design-system
One-click install
npx skills add https://github.com/viasnake/dotfiles --skill frontend-design-viasnake
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/viasnake/dotfiles/tree/main/config/opencode/skills/frontend-design
Command: npx skills add https://github.com/viasnake/dotfiles --skill frontend-design-viasnake

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams struggle to deliver frontend interfaces that feel cohesive and distinctive, leading to inconsistent user experiences across components and pages.

Core Features & Use Cases

  • Establish a strong visual direction for web components, pages, and applications.
  • Align typography, color, spacing, and motion with an existing design system, or define one from scratch.
  • Provide practical guidance to balance creativity with accessibility, maintainability, and performance.

Quick Start

Provide a concrete frontend design direction for a new web app based on its audience and constraints.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I establish a cohesive visual direction for frontend components and web pages?▼

To establish a cohesive frontend design, align typography, color, spacing, and motion with an existing design system or define a new one from scratch to ensure consistent visual direction across all pages and components.

What's the best way to build production-grade frontend interfaces for dashboards and marketing sites?▼

Building production-grade frontend interfaces requires applying a clear visual direction to web components and pages, ensuring adherence to a cohesive design system that balances creativity with accessibility and maintainable implementation.

Can I define a design system from scratch for a new web application?▼

Yes, you can define a design system from scratch for a new web application by establishing foundational rules for typography, color, spacing, motion, and accessibility tailored to your specific audience and constraints.

How do I balance creativity and accessibility when refining UI design?▼

To balance creativity and accessibility in UI design, apply practical guidance that aligns distinctive visual directions with maintainable implementation, ensuring your web components remain both visually distinctive and accessible.

Does this approach work for both building new web components and refining existing pages?▼

Yes, this frontend design approach works for both building new web components and refining existing pages, applying a cohesive design system to ensure distinctive and maintainable user experiences across product teams.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
DeliciousHouseDeliciousHouse
2

frontend-design

Design and implement React components, web layouts, dashboards, and landing pages.

Community
Advanced
letitbkletitbk

ux-design-brainstorm

Generate UX pattern suggestions and wireframe diagrams for e-commerce design scenarios.

Community
Intermediate
jieni777jieni777
1

frontend-design

Designs responsive, accessible frontend interfaces with cohesive typography, color, and motion.

Community
Intermediate