skills.rest
open-session
open-sessionOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create BOS-aligned frontend interfaces with distinctive aesthetics and production-ready interactions.

1|Updated May 4, 2026
Search Tags:#ui#accessibility#tailwind#design-system#motion#frontend-design#bos
One-click install
npx skills add https://github.com/open-session/os_design_system --skill frontend-design-open-session
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/open-session/os_design_system/tree/main/.claude/skills/brand/frontend-design
Command: npx skills add https://github.com/open-session/os_design_system --skill frontend-design-open-session

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create frontend interfaces that feel intentionally designed instead of generic or AI-generated, while staying aligned with the BOS visual language and production standards.

Core Features & Use Cases

  • Distinctive UI direction: Chooses a clear aesthetic such as warm minimal, editorial, soft organic, industrial raw, or luxury refined based on the product context.
  • BOS design system integration: Applies brand colors, typography, borders, shadows, motion, and accessibility rules consistently across components.
  • Production-ready interaction design: Guides practical decisions for forms, loading states, focus management, responsive layout, and reduced-motion support.
  • Use case: Build a dashboard, settings panel, marketing page, or card component that feels cohesive, polished, and unmistakably on-brand.

Quick Start

Ask the frontend-design skill to create a BOS-aligned interface for your product with a clear aesthetic direction and production-ready component structure.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build BOS components that don't look like generic AI-generated UI?▼

BOS design tokens are semantic variables applied to brand colors, typography, borders, shadows, and motion patterns to ensure consistent visual language and accessibility rules across frontend interfaces.

Can I use Tailwind variables to create accessible dashboards and forms?▼

Yes, semantic Tailwind variables support accessible dashboards and forms by applying BOS design tokens for focus management, loading states, responsive layout, and reduced-motion support across product UI layouts.

What's the best way to add motion and interaction polish to frontend UI layouts?▼

The best way to add interaction polish to frontend UI layouts is applying BOS motion patterns alongside accessibility rules, ensuring focus management and reduced-motion support for production-ready interfaces.

Does this approach work for building settings panels and marketing pages?▼

Yes, this approach works for settings panels, marketing pages, dashboards, and card components by applying BOS design system integration with consistent typography, borders, shadows, and accessibility rules.

Why does my frontend interface lack a cohesive design system aesthetic?▼

Frontend interfaces lack cohesion when they miss BOS design tokens for warm neutrals, typography, and interaction polish, resulting in generic AI-generated aesthetics instead of intentional, on-brand design direction.

Related Skills

Explore More Design & Creative Skills→
BrunoAMSilvaBrunoAMSilva

interface-design

Plan UI systems and define UX flows for software interfaces.

Community
Advanced
dankoflydankofly

tailwind-patterns

Provide Tailwind CSS component patterns for responsive layouts and dark mode.

Community
Advanced
tuanemuytuanemuy

frontend-design

Design production-grade frontend interfaces from a design brief, outputting semantic tokens, a component map, and example code.

Community
Advanced
jairvisassistant-dotjairvisassistant-dot

minimalist-ui

Define UI protocols for ultra-minimal editorial interfaces with typography and color tokens.

Community
Advanced