skills.rest
Samaara-Das
Samaara-DasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Codify Stock Buddy UI design-system guidelines for Tailwind and CSS tokens.

Updated Aug 23, 2026
Search Tags:#theming#ui#frontend#components#tailwind#design-system#stock-buddy
One-click install
npx skills add https://github.com/Samaara-Das/money-hungry-games --skill frontend-design-samaara-das
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Samaara-Das/money-hungry-games/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/Samaara-Das/money-hungry-games --skill frontend-design-samaara-das

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Stock Buddy frontend design system guides developers to build polished trading UI quickly, ensuring consistency and visual quality across components.

Core Features & Use Cases

  • Identity & Tone: defines design principles, color system, typography, and component patterns to maintain a cohesive look and feel.
  • Theme-aware UI: ensures components adapt to light/dark themes with semantic CSS variables and Tailwind classes.
  • Implementation Guidance: provides patterns for Cards, Buttons, Tables, Navigation, Chat, etc., plus motion guidelines and accessibility considerations.

Quick Start

Start by aligning with Stock Buddy's design tokens and implement components using the provided design system guidelines.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a consistent trading UI design system with Tailwind and CSS variables?▼

To build a consistent trading UI design system, codify guidelines for semantic Tailwind classes and CSS variable tokens. This ensures visual consistency across Cards, Buttons, Tables, and chat interfaces in your application.

What is a design system approach for adapting light and dark themes in frontend components?▼

A design system approach for light and dark themes uses semantic CSS variables and Tailwind classes. This structure ensures components adapt to theme changes automatically without requiring manual style overrides.

How to apply accessibility and motion rules when designing frontend UI components?▼

To apply accessibility and motion rules, implement defined design-system guidelines within your frontend UI components. This provides specific patterns and considerations for accessible interactions and consistent motion behavior.

Does the Stock Buddy frontend design system include patterns for chat interfaces and navigation?▼

Yes, the Stock Buddy frontend design system includes implementation patterns for chat interfaces and navigation. It provides specific guidance for building these components alongside Cards, Buttons, and Tables.

What is the best way to unify color and typography across a trading application frontend?▼

The best way to unify color and typography is by defining a cohesive design identity with a structured color system. This maintains a consistent look and feel across all trading application components.

Related Skills

Explore More Design & Creative Skills→
JaivishChauhanJaivishChauhan
6

tailwind-mastery

Configure Tailwind CSS v4 design systems with CSS variables in Next.js projects.

Community
Advanced
houkehouke

frontend-ui-polish

Apply Framer Motion interactions and design tokens to frontend components.

Community
Intermediate
levinbaenningerlevinbaenninger

tailwind-design-system

Standardize Tailwind CSS v4 design systems with React 19 component patterns.

Community
Advanced
Anuj23105Anuj23105
1

dark-mode-implementation

Implement dark mode with theme switching, persistence, and system preference detection in React and Tailwind.

Community
Advanced