skills.rest
AryanMohanlall
AryanMohanlallCOMMUNITY
Explore all skills by this author →
GitHub

add-styling

Applies antd-style createStyles patterns and design tokens to SafeGuard frontend pages and components.

Updated Mar 26, 2026
Search Tags:#responsive design#next.js#css-in-js#frontend styling#ant design#antd-style#createstyles
One-click install
npx skills add https://github.com/AryanMohanlall/SafeGuard --skill add-styling-aryanmohanlall
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-styling
Source: https://github.com/AryanMohanlall/SafeGuard/tree/main/.agents/skills/add-styling
Command: npx skills add https://github.com/AryanMohanlall/SafeGuard --skill add-styling-aryanmohanlall

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires antd-style.

What problem does it solve? Frontend pages in the SafeGuard project often end up with inconsistent styling: inline styles, hardcoded hex colors, and layouts that break on mobile. This Skill enforces a single canonical styling approach so every route and component follows the same antd-style conventions. ## Core Features & Use Cases - Colocated Style Files: Enforces a style.ts file next to every page.tsx route and a styles.ts next to non-page components. - Token-Based Design: Requires Ant Design tokens for colors, spacing, radius, and typography instead of hardcoded values. - Responsive-First Rules: Mandates mobile-first layouts verified at 360px, 768px, and desktop widths with no horizontal overflow. - Use Case: When building a new dashboard route, use this Skill to scaffold the page with a createStyles hook, token-based spacing, and media queries that stack action rows on mobile. ## Quick Start Style the new incidents page following the SafeGuard antd-style conventions with a colocated style.ts file and mobile-responsive layout.

Frequently Asked Questions about add-styling

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

FAQPage Schema
How do I style a Next.js page with antd-style createStyles?▼

Create a style.ts file colocated with your page.tsx and export a useStyles hook built with createStyles from antd-style. Define each style block with the css template literal and reference design tokens like token.paddingLG instead of hardcoded values.

How to make Ant Design layouts mobile responsive?▼

Build mobile-first and add media queries inside your createStyles definitions, such as switching flex rows to column direction below 768px. Verify there is no horizontal overflow at 360px and that action groups stack or wrap on small screens.

Can I use Tailwind or CSS modules with antd-style?▼

No, this convention prohibits Tailwind classes and CSS modules entirely. All styles must live in colocated style.ts files using the createStyles pattern, with only trivial one-liner inline styles permitted.

Should I use hardcoded hex colors in Ant Design components?▼

No, always use design tokens such as token.colorBgLayout for colors and token spacing values for margins and padding. Hardcoded hex values and pixel strings break theme consistency and are disallowed by the styling rules.

Where should component styles live in a Next.js app router project?▼

Page routes keep a style.ts file next to page.tsx, using a route group like app/(landing) for root routes. Non-page components get a styles.ts file colocated inside their feature folder under components/.

Related Skills

Explore More Software Engineering Skills→
theslashdojotheslashdojo

app-router

Create and organize Next.js App Router routes and layouts.

Official
Intermediate
tonehqtonehq
11

form_page

Generate full-stack create/edit forms with backend endpoints, Zod schemas, and UI layouts.

Official
Advanced
kanopikanopi
16

accessibility-checker

Validate UI elements for WCAG 2.1 AA accessibility criteria.

Official
Intermediate
dtyqdtyq
5.0k

antd-style-to-tailwind

Translate Ant Design CSS-in-JS patterns to Tailwind utilities.

Official
Advanced