skills.rest
RosenGray
RosenGrayCOMMUNITY
Explore all skills by this author →
GitHub

sima-styling

Structure React UI components with Radix UI primitives and styled-components.

Updated Aug 27, 2026
Search Tags:#theming#styled-components#responsive-design#radix-ui#component-architecture#react UI
One-click install
npx skills add https://github.com/RosenGray/sima --skill sima-styling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sima-styling
Source: https://github.com/RosenGray/sima/tree/main/.cursor/skills/sima-styling
Command: npx skills add https://github.com/RosenGray/sima --skill sima-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guidance for building reusable, Radix-based UI components with consistent theming and responsive styling using styled-components, ensuring reliability and maintainability across a codebase.

Core Features & Use Cases

  • Always use Radix UI components
  • Always use Radix UI theme and colors system
  • Always use Radix UI icons
  • For any other additional styling, please use styled components
  • When creating a component, the name of the component always starts with a big letter and .tsx format; for example: Header.tsx
  • When creating a styled component, it will have the same component name following by .styles.ts - for example: Header.styles.ts
  • When creating a styled component, please check first if Radix UI has this element already. For example, it has a Box, so you can do styled(Box) instead of creating a div
  • Critical: use client directive at the top of ALL .styles.ts files that use styled-components. This is required because styled-components uses React Context internally which only works in Client Components.
  • Always add "use client" directive at the top of ALL .styles.ts files that use styled-components
  • Breakpoints and Radix responsive pattern guidelines should be followed to ensure consistency.

Quick Start

Use the sima styling guidelines to kick off a new UI component:

  • Create a new component file with a capitalized name and .tsx extension, e.g., Header.tsx
  • Create a corresponding styled component file named Header.styles.ts with "use client" as the first line
  • Import and extend Radix primitives where possible (e.g., styled(Box))
  • Reference Radix CSS variables for theming (e.g., var(--accent-a3), var(--radius-4))
  • Apply responsive props from Radix UI where available, falling back to minimal CSS only when necessary
  • Verify there is no duplicate element creation by reusing existing Radix primitives when possible

Frequently Asked Questions about sima-styling

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

FAQPage Schema
How do I structure styled-components with Radix UI in a React project?▼

To structure styled-components with Radix UI, create a capitalized .tsx component file and a matching .styles.ts file. Extend Radix primitives like styled(Box) instead of plain divs, and reference Radix CSS variables for theming to ensure reliability.

Why do my styled-components fail in React Server Components?▼

Styled-components fail in React Server Components because they use React Context internally, which only works on the client. You must add the "use client" directive at the top of all .styles.ts files to resolve this.

Can I use custom CSS breakpoints instead of Radix UI responsive patterns?▼

You should follow Radix UI responsive pattern guidelines and breakpoints for consistency. Apply responsive props from Radix UI where available, falling back to minimal custom CSS only when absolutely necessary.

What is the best way to name UI component files when using Radix UI?▼

The best way to name UI component files is using a capitalized name with a .tsx extension, such as Header.tsx. Corresponding styled component files should match this name followed by .styles.ts, like Header.styles.ts.

Do I need to create a custom div element if Radix UI has a Box primitive?▼

You do not need to create a custom div if Radix UI has an existing primitive. Check for available Radix elements first and use styled(Box) instead of creating a new div to avoid duplicate element creation.

Related Skills

Explore More Design & Creative Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
MinhDuyDEVMinhDuyDEV

frontend-ui-engineering

Apply WCAG 2.1 AA accessibility and responsive design to React user interfaces.

Community
Advanced
SEMOSSSEMOSS
2

semoss-user-menu

Integrate a user profile dropdown and navigation bar into React-based SEMOSS applications.

Official
Intermediate
ilandahanilandahan
9

atomic-page-builder

Compose UI pages exclusively from existing atomic-design components using Figma-derived specs and token-driven styling.

Community
Intermediate