In the rapidly evolving landscape of AI-assisted development, "Agentic Skills" represent a new paradigm in software development automation.This blog explores how to create and use agentic skills, with a focus on the Carbon Converter skill—a powerful tool for converting any UI to Carbon Design System compliant implementations.
What Are Agentic Skills?
Agentic skills are specialized AI capabilities that:
- Understand Context: Analyze existing codebases to learn patterns and conventions
- Make Intelligent Decisions: Choose appropriate solutions based on project requirements
- Follow Best Practices: Apply industry standards and accessibility guidelines
- Generate Production Code: Create complete, tested, and maintainable implementations
- Learn and Adapt: Improve based on feedback and real-world usage
Unlike traditional code generators that follow rigid templates, agentic skills act as intelligent collaborators that understand the "why" behind the code, not just the "what."
The Carbon Converter Skill
What It Does?
The Carbon Converter skill automates the conversion of any UI component or screen to Carbon Design System compliant implementations. It handles:
1. Component Analysis: Identifies UI patterns from screenshots, existing code, or designs
2. Carbon Mapping: Maps components to their Carbon equivalents
3. Complete Data Layer: Generates services, transformers, and type definitions
4. Accessibility: Ensures WCAG 2.1 AA compliance
5. Integration: Updates routing and state management
Key Features
- 🎨 Screen Analysis: Analyze screenshots or existing code
- 🔄 Component Mapping: Automatically map to Carbon components
- ⚡ Code Generation: Generate Carbon-compliant React/TypeScript code
- 🏗️ Service Generation: Create API service files
- 🔄 Transformer Generation: Generate data transformers
- 📋 Column Definitions: Auto-generate DataTable configurations
- ♿ Accessibility: Ensure WCAG 2.1 AA compliance
- 🎯 Design Tokens: Apply Carbon design tokens
- 📐 Grid System: Convert layouts to Carbon Grid
How to Use the Carbon Converter Skill
Step 1: Activate the Skill
The Carbon Converter skill is available in Bob's skill library. Simply activate it in your project to begin using its capabilities.
Step 2: Choose Your Workflow
Workflow A: Screenshot to Carbon
Best for: Converting existing screens or mockups
1. Provide a Screenshot: Share an image of the UI you want to convert
2. Describe the Functionality: Explain what the screen does
3. Specify Data Requirements: Mention any API endpoints or data sources
4. Review Generated Code: The skill creates all necessary files
Example Request:
```
"Convert this dashboard screenshot to Carbon. It displays a list of items
with search and filtering. The API endpoint is /api/items"
```
Workflow B: Code to Carbon
Best for: Refactoring existing implementations
1. Share Existing Code: Provide the current implementation
2. Specify Requirements: Mention any specific Carbon components to use
3. Review Conversion: The skill refactors to Carbon-compliant code
4. Test Integration: Verify the converted code works as expected
Example Request:
```
"Convert this React component to use Carbon DataTable.
Keep the existing search and filter functionality."
```
Workflow C: Full Stack Carbon Conversion
Best for: Creating new pages from scratch
1. Describe the Page: Explain the purpose and functionality
2. Provide API Details: Share endpoint, sample response, or API documentation
3. Specify Columns: List the data fields to display
4. Review Complete Implementation: Get service, transformer, columns, types, component, and routes
Example Request:
```
"Create a new page to display user data from /api/users endpoint.
Show columns: name, email, role, status, last login.
Include search and filtering capabilities."
```
Step 3: What Gets Generated
The Carbon Converter creates a complete implementation:
1. Service Layer
Handles all API communication with proper error handling and caching support.
Generated Features:
- Fetch list and detail methods
- Create, update, delete operations
- Priority-based API calls
- Cache management
2. Transformer Layer
Converts API responses to UI-friendly data models.
Generated Features:
- Data transformation logic
- Nested object extraction
- Type-safe conversions
- Default value handling
- Status mapping
3. Column Definitions
Defines table columns with proper renderers.
Generated Features:
- Column headers and IDs
- Sortable configurations
- Custom cell renderers
- Visibility settings
4. TypeScript Types
Complete type definitions for type safety.
Generated Features:
- Interface definitions
- Optional field handling
- Enum types
- Type exports
5. React Component
Production-ready Carbon component.
Generated Features:
- State management with hooks
- Loading and error states
- Search and filter logic
- Carbon DataTable integration
- Responsive design
- Accessibility features
6. Routing Configuration
Automatic route setup.
Generated Features:
- Route constants
- Route definitions
- Component imports
Why Create Your Own Skills?
1. Solve Repetitive Problems Once
Every team has repetitive tasks—whether it's converting components, setting up boilerplate, or following specific patterns. By creating a skill, you solve the problem once and help everyone benefit from the solution.
2. Codify Team Knowledge
Skills capture your team's best practices, patterns, and lessons learned. Instead of knowledge living in documentation or individual developers' minds, it becomes an active, executable capability that guides everyone.
3. Accelerate Onboarding
New team members can leverage skills to understand and follow established patterns immediately, reducing the learning curve and ensuring consistency from day one.
4. Scale Expertise
Not everyone on your team may be an expert in every technology. Skills allow you to package expert knowledge and make it accessible to everyone, democratizing expertise across the team.
5. Continuous Improvement
As your team learns and evolves, skills can be updated to reflect new insights, better patterns, and improved approaches—creating a living knowledge base that grows with your team.
Take Action
Don't wait for the perfect skill idea. Start small:
1. Pick one repetitive task you do this week
2. Document how you do it
3. Create a simple skill that automates it
4. Share it with one teammate
5. Iterate based on feedback
Every expert was once a beginner. Every powerful skill started as a simple idea. The Carbon Converter skill evolved from basic component mapping to a comprehensive conversion tool through iteration and real-world use.
Your team's next productivity breakthrough might be just one skill away.