skills.rest
razorpay
razorpayOFFICIAL
Explore all skills by this author →
Website𝕏@razorpayGitHub

ui-code-guidelines

Guides frontend UI code generation using Blade design system components and styled props.

649|197|Updated Jan 28, 2020
Search Tags:#Frontend#razorpay#blade#Design system#reAct#UI code#styled props
One-click install
npx skills add https://github.com/razorpay/blade --skill ui-code-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-code-guidelines
Source: https://github.com/razorpay/blade/tree/main/packages/blade-mcp/skillTemplate
Command: npx skills add https://github.com/razorpay/blade --skill ui-code-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Writing frontend UI code with a design system requires knowing the correct components, props, spacing tokens, and layout patterns. This Skill ensures AI-generated UI code consistently uses Razorpay's Blade design system components instead of ad-hoc custom styles, preventing inconsistent UI and incorrect prop usage.

Core Features & Use Cases

  • Blade-first code generation: Instructs the AI to consult Blade MCP for component documentation before writing or updating UI code, and to prefer Blade components over custom ones.
  • Layout and styling guidance: Provides reference documentation for the Box component, StyledPropsBlade type, spacing tokens, and responsive breakpoint-based layouts.
  • Utility type reference: Documents common types like TestID, DataAnalyticsAttribute, FeedbackColors, and Breakpoints encountered in Blade component APIs.
  • Use Case: When asked to build a settings page, the AI fetches the relevant Blade pattern docs, composes the layout with Box and styled props like margin="spacing.3", and fixes any TypeScript or ESLint errors using component docs.

Quick Start

Ask the AI to build a responsive dashboard layout using Blade components and the ui-code-guidelines skill.

Frequently Asked Questions about ui-code-guidelines

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

FAQPage Schema
How do I write frontend UI code with the Blade design system?▼

Use Blade components instead of custom components, and consult Blade MCP for component documentation before writing code. Build layouts with the Box component and styled props, and fix TypeScript or ESLint errors by referring back to component docs.

How do I create responsive layouts in Blade?▼

Use the Box component with styled props that accept breakpoint objects, such as padding={{ base: 'spacing.0', m: 'spacing.3', xl: 'spacing.6' }}. Breakpoints follow a mobile-first approach with base, xs, s, m, l, and xl keys.

What spacing values does Blade support for margin and padding?▼

Blade supports spacing tokens like 'spacing.3' mapped to a defined scale (0 through 11), plus px, %, vh, vw, calc(), auto, and fit-content values. Numeric values like margin={0} or plain strings like '0' are not supported.

What is the StyledPropsBlade type in Blade?▼

StyledPropsBlade is a partial combination of margin props, selected flexbox props, position props, grid props, and display/visibility CSS properties. Components accepting styled props use this type, and all values can be made responsive via breakpoint objects.

When should I use custom styles instead of Blade components?▼

Custom styles should only be used when extremely required. The guideline is to always prefer Blade components and minimal component configurations, adding props like size or color only when the specific use case explicitly demands them.

Related Skills

Explore More Software Engineering Skills→
JoaoPedroAmaralJoaoPedroAmaral

liferay-blade-cli

Scaffold and manage Liferay projects using Blade CLI commands.

Community
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

prettier-integration

Integrate Prettier with editors, pre-commit hooks, ESLint, and CI/CD pipelines.

Official
Basic
vibbsvibbs
6

instrumentation

Define AARRR-aligned event taxonomy and tracker ID conventions for analytics instrumentation.

Community
Advanced
razorpayrazorpay
2

blade-compliance-reviewer

Detect Blade design-system drift in a UI file and emit a per-line Markdown report.

Official
Intermediate