| name | syncfusion-react-ui-builder |
| description | Generates production-ready webpages powered by Syncfusion React Components. Orchestrates Orchestrates a structured workflow that handles design thinking, component picking, code generation, and validation with built-in WCAG 2.1 AA accessibility and responsive design. Use when the user asks to create web components, build UI pages, design interfaces, or generate frontend code for React applications. |
| metadata | {"author":"Syncfusion Inc","version":"1.0.0"} |
Syncfusion React UI Builder
Overview
The Syncfusion React UI Builder skill is a frontend-only React component generator that orchestrates an AI agent through 8 stages to generate production-ready UI components powered by Syncfusion.
What This Skill Does
✅ Generates:
- React functional components (
.tsx/.jsx) with hooks
- CSS stylesheets (CSS Modules, Tailwind classes, inline styles)
- TypeScript interfaces for properties, state, and event handlers
- Syncfusion component integration with correct imports and properties
- Client-side form validation logic
- WCAG 2.1 AA accessibility markup (ARIA attributes, semantic HTML)
- Responsive CSS with mobile-first breakpoints
- Component index exports and barrel files
❌ Does NOT Generate:
- Backend code (API routes, server handlers, middleware)
- Database schemas or ORM models
- Authentication/authorization logic
- Server-side validation
- Routing configuration
- Environment secrets or infrastructure config
When to Use
✅ USE this Skill for:
- Full UI builds with 3+ Syncfusion components
- Design system decisions required (CSS framework, colors, spacing, typography)
- Complete pages or dashboards from scratch
- WCAG 2.1 AA validation for complex layouts
- Multi-stage workflows requiring design → code → validate
- Team collaboration on larger component projects
- Examples:
- Building a complete React admin dashboard
- Designing a multi-form wizard interface
- Creating a full data management portal with multiple sections
- Implementing a complex dashboard with multiple views and charts
❌ DO NOT USE this Skill for:
- ✋ Configuring a single component (use component skill directly)
- ✋ Quick implementation questions (use component skill directly)
- ✋ Component tutorials or how-tos (use component skill directly)
- ✋ Troubleshooting component issues (use component skill + diagnostic protocol)
- ✋ Backend/API code (out of scope)
- ✋ Non-Syncfusion React questions (use general React help)
Quick Start
Prerequisites
- Active React project (React 18+, Next.js 13+, Vite, or CRA)
- Node.js 18+ and npm/yarn/pnpm installed
- Syncfusion components library (auto-installed if missing):
npx skills add syncfusion/react-ui-components-skills -y
Basic Usage
Example 1: Generate a Login Form
User: "Create a login form with email, password, and remember me checkbox"
Skill executes:
→ Stage 1: Identifies login form component type
→ Stage 2: Detects project structure (React, TypeScript, etc.)
→ Stage 3-4: AI creates optimal component-mapping.json → maps to Syncfusion components
→ Stage 5: Generates LoginForm.tsx with validation
→ Stage 6: Installs dependencies
→ Stage 7: Validates WCAG 2.1 AA compliance
→ Stage 8: Inserts code into project
Output:
✓ components/LoginForm/LoginForm.tsx
✓ components/LoginForm/LoginForm.module.css
✓ components/LoginForm/index.ts
Example 2: Generate a Dashboard
User: "Build a dashboard with customer overview, recent orders table, and sales chart"
Output:
✓ components/Dashboard/Dashboard.tsx (main layout)
✓ components/CustomerOverview/CustomerOverview.tsx
✓ components/RecentOrders/RecentOrders.tsx (with Syncfusion DataGrid)
✓ components/SalesChart/SalesChart.tsx (with Syncfusion ChartComponent)
✓ Mock data included (useState with sample data)
✓ Responsive design (mobile-first, grid layout)
✓ Dark mode support with design tokens
✓ Full accessibility compliance (WCAG 2.1 AA)
How It Works: 8-Stage AI Orchestration (Stateless)
The skill orchestrates 8 stages of pure AI reasoning with two user decision points.
Key Architecture:
- Stateless design: Conversation history maintains state
- Pure AI reasoning: Each stage reads guidance docs, analyzes context, makes decisions
- 1 user decision gates: Stage 4 (theme confirmation)
- 7 fully automated stages: 1, 2, 3, 5, 6, 7, and final code insertion
- Dedicated theming stage: Stage 4 locks design system before code generation
User Request
↓
[Stage 1: Intent Analysis]
AI reads query → identifies component type & features
↓
[Stage 2: Project Detection]
AI scans project → detect framework, language, CSS strategy, preferences
↓
[Stage 3: Layout Analysis & Component Mapping]
AI analyzes requirements → creates optimal component-mapping.json
AI maps to specific Syncfusion components (3+ components)
↓
[Stage 4: Theming & Design System] ⭐ USER DECISION #1
AI locks CSS framework → Syncfusion theme mapping
AI selects color system (OKLCH, brand colors)
AI confirms spacing/typography scale (4pt grid, 1.25 ratio)
Design system decisions locked before code generation
User confirms theming decision
↓
[Stage 5: Code Generation]
AI generates .tsx, .css, TypeScript interfaces
Uses theming decisions from Stage 4
For complex UIs (4+ sections or 3+ component types), components MUST be split into modular subcomponents.
With accessibility + responsive design built-in
↓
[Stage 6: Dependencies]
AI detects required packages (Syncfusion + CSS framework)
Presents npm install command or runs it
Proceed to next stage
↓
[Stage 7: Validation]
AI validates WCAG 2.1 AA + security + performance + theming
Binary result: PASS ✓ or FAIL ✗
↓
[Stage 8: Code Insertion]
AI inserts files into project
Updates imports, verifies build
↓
✓ Complete
Stage Descriptions:
- Stage 1 (Intent Analysis): Parse user query, identify component type and features. Read:
references/stage-1-intent-analysis.md
- Stage 2 (Project Detection): Auto-detect framework, language, CSS strategy, component directory. Read:
references/stage-2-project-detection.md
- Stage 3 (Layout Analysis & Component Mapping): AI analyzes requirements, creates optimal component-mapping.json, maps to Syncfusion components. Read:
references/stage-3-layout-analysis.md
- Stage 4 (Theming & Design System): Lock CSS framework, Syncfusion theme, color system (OKLCH), spacing (4pt), typography (1.25 ratio). Read:
references/stage-4-theming-and-design-system.md
- Stage 5 (Code Generation): Generate React with design tokens from Stage 4 applied + accessibility + responsive design. Read:
references/stage-5-code-generation.md
- Stage 6 (Dependencies): Detect packages (Syncfusion + CSS framework), resolve conflicts, prepare install command. Read:
references/stage-6-dependencies.md
- Stage 7 (Validation): Validate WCAG 2.1 AA, security, performance, theming integration. Binary pass/fail. Read:
references/stage-7-validation.md + assets/validation-rules.md
- Stage 8 (Code Insertion): AI inserts files, updates imports, verifies build succeeds.
User Interaction Summary:
| Stage | Interaction |
|---|
| 1 | None (AI analyzes) |
| 2 | None (AI analyzes) |
| 3 | None (AI analyzes) |
| 4 | Confirm theming decisions (CSS framework, colors, spacing, typography) |
| 5 | None (AI generates) |
| 6 | None (AI executes) |
| 7 | None (AI analyzes) |
| 8 | None (AI executes) |
Total user decision gates: 1 (Stage 4: theming decision). Rest fully automated with AI reasoning + guidance docs.
Agent Instructions
When User Requests UI Component Generation
- Validate scope: Confirm request is for frontend components (not backend/API)
- Load guidance: Read
stage-1-intent-analysis.md to understand Stage 1
- Execute 8-stage flow: Follow the orchestration flow shown above
- Progressive disclosure: Load stage guides on-demand; load support references only when needed
- Maintain conversation history: Each stage reads previous decisions from conversation context (stateless)
Stage Execution & Reference Loading
Stage 1: Intent Analysis
- Read:
references/stage-1-intent-analysis.md
- Task: Parse user query, identify component type, resolve ambiguities
- Output: Component type + modifiers + target directory
Stage 2: Project Detection
- Read:
references/stage-2-project-detection.md
- Task: Auto-detect React framework, language, CSS strategy, formatting rules
- Output: Project configuration
Stage 3: Layout Analysis & Component Mapping
- Read:
references/stage-3-layout-analysis.md
- Task: Analyze user requirements → create optimal component-mapping.json → map to Syncfusion components (3+ minimum)
- Output: component-mapping.json + Component mapping
Stage 4: Theming & Design System ⭐ USER DECISION #1
- Read:
references/stage-4-theming-and-design-system.md
- Task: Lock CSS framework, Syncfusion theme, color system (OKLCH), spacing (4pt grid), typography (1.25 ratio), responsive breakpoints
- Output: Design system decisions + User confirmation
Stage 5: Code Generation
- Read:
references/stage-5-code-generation.md
- Task: Generate React .tsx, CSS, TypeScript interfaces using theming from Stage 4
- Ensure: WCAG 2.1 AA accessibility, responsive design, token architecture applied
- Output: Generated files ready for review
Stage 6: Dependencies
- Read:
references/stage-6-dependencies.md
- Task: Detect required packages (Syncfusion + CSS framework), resolve version conflicts
- Output: Output installation command only; do not assume auto-install unless explicitly requested
Stage 7: Validation
- Read:
references/stage-7-validation.md + assets/validation-rules.md + references/web-standards.md
- Task: Validate against WCAG 2.1 AA, security, performance, theming integration standards
- Auto-apply fixes where possible
- Output: Binary result (PASS ✓ or FAIL ✗)
Stage 8: Code Insertion
- Task: Insert generated files into project, update imports, verify build
- Output: Success report with file paths
Boundary Rules (CRITICAL)
AI agents executing this skill MUST:
- Frontend only: Never generate backend code (API routes, database schemas, middleware)
- Mock data only: Use
useState with hardcoded samples; no fetch() to real APIs
- No secrets: Exception:
.env.local for SYNCFUSION_LICENSE_KEY when user provides
- React components only: Generate
.tsx/.jsx files in component directories
- Redirect backend requests: "This skill generates frontend UI only. Backend integration is your app's responsibility. Ready to generate the frontend?"
- Prioritize skill: Always prioritize Syncfusion component skill files as source of truth when available; do not rely on memory.
Error Handling
If any stage fails:
- Retry once with same approach
- If retry fails, attempt workaround or skip to next stage
- Notify user with error message from stage output
- Offer recovery: "Would you like to go back to Stage 3 and choose a different layout?"
If stage failure impacts correctness, halt and request user direction instead of proceeding with uncertain output
Resource Loading Strategy (Progressive Disclosure)
Load SKILL.md first (you're reading it now) ~400 lines
Load stage guides on-demand (each <200 lines):
stage-1-intent-analysis.md → During Stage 1stage-2-project-detection.md → During Stage 2stage-3-layout-analysis.md → During Stage 3- etc.
Load support references only when needed:
web-standards.md → When validating in Stage 5assets/validation-rules.md → When validating in Stage 5
Result: Initial load ~400 lines (SKILL.md only). Full spec available on-demand, never exceeding Agent Skills context limits.
Configuration & User Customization
Auto-Detected Settings
During Stage 2 (Project Detection), AI automatically detects:
- Framework: React, Next.js (App Router / Pages Router), Vite, Create React App
- Language: TypeScript (if
tsconfig.json exists) or JavaScript
- Styling: CSS Modules, Tailwind CSS, CSS-in-JS, or inline styles
- Formatting: Prettier/ESLint rules (indentation, quotes, semicolons)
- Component Directory:
src/components/, app/components/, or similar
User Override Options
In Stage 2, user can override any detected setting:
Detected Settings:
Framework: Next.js 14 (App Router)
Language: TypeScript
CSS: CSS Modules
Component Directory: app/components/
[Confirm] [Override Each] [Cancel]
Syncfusion License Configuration
The skill handles license key setup:
- Check for existing
SYNCFUSION_LICENSE_KEY in .env.local
- If missing, prompt user: "Get a free Community License at https://www.syncfusion.com/account/manage-trials"
- If provided, write to
.env.local + inject registerLicense() in app entry
- If skipped, proceed but warn that watermark will appear in preview
Code Generation Standards
All generated code includes:
Accessibility (WCAG 2.1 AA)
- ✅ Semantic HTML5 (
<form>, <label>, <input>, <button>)
- ✅ ARIA labels and descriptions
- ✅ Keyboard navigation (tab order, focus management)
- ✅ Color contrast ≥ 4.5:1
- ✅ Focus indicators on interactive elements
Responsive Design
- ✅ Mobile-first CSS (320px base, then scale up)
- ✅ Flexbox/Grid layouts (no fixed widths)
- ✅ Media queries at 768px, 1024px+ breakpoints
- ✅ Touch-friendly buttons (44x44px minimum)
Security
- ✅ Input validation and sanitization
- ✅ No
dangerouslySetInnerHTML without sanitization
- ✅ No hardcoded secrets
- ✅ No XSS vulnerabilities
Performance
- ✅ React.memo for stable components
- ✅ useCallback for event handlers
- ✅ Lazy loading for large components
- ✅ Optimized re-renders
TypeScript & Types
- ✅ Full type coverage (no
any types)
- ✅ Props interfaces with JSDoc
- ✅ Event handler signatures
- ✅ State type annotations
Supported Use Cases
- Login form: TextBox (email), TextBox (password), CheckBox (remember), Button (submit)
- Data table: DataGrid with sorting, filtering, pagination, row selection
- Dashboard: Multiple components orchestrated (header, sidebar, main content, footer)
- Registration wizard: Multi-step form with progress indicator and validation
Troubleshooting
Common Issues:
| Issue | Solution |
|---|
| "Project type not detected" | Ensure package.json exists with React dependency |
| "Syncfusion license banner appears" | Add license key via Stage 2 prompt |
| "Build fails after insertion" | Use Syncfusion component skills to resolve failures |
| "Component not rendering" | Verify import paths and ensure parent component imports correctly |
Additional Resources
Quick Reference by Use Case
| Need | Reference File |
|---|
| Understanding workflow | This SKILL.md file |
| How Stage X works | references/stage-X-*.md |
| Validation rules | assets/validation-rules.md |
| Accessibility/security | references/web-standards.md |
Support
For issues or questions:
- Check Syncfusion component skills for common problems
- Verify your project meets prerequisites (React 18+, Node.js 18+)
- Ensure Syncfusion license is valid and registered
- Review generated code compliance report for warnings
