AnySystem Design – LLM Agent Skill

A comprehensive LLM agent skill for the AnySystem Design React component library. This skill enables AI assistants to help developers use the component library effectively.

Overview

AnySystem Design is a React component library with 22 components covering forms, layouts, navigation, and data display. This skill provides structured knowledge and examples for LLM agents to assist developers.

Installation

Option 1: NPX / BUNX Package (Recommended)

npx skills add freedomw1987/anysystem-design-skill

# or 

bunx skills add freedomw1987/anysystem-design-skill

Then configure in your AI assistant:

{
  "skills": {
    "anysystem-design": {
      "path": "node_modules/@anysystem-design-skill"
    }
  }
}

Option 2: Git Submodule

Add as a submodule to your project:

git submodule add git@github.com:freedomw1987/anysystem-design-skill.git agent-skill

Update the submodule to latest version:

git submodule update --remote agent-skill

Option 3: Direct Clone

Clone this repository directly:

git clone git@github.com:freedomw1987/anysystem-design-skill.git

Option 4: Claude Code Skills

For Claude Code CLI, copy to your project’s .claude/skills/ directory:

cp -r anysystem-design-skill/* .claude/skills/

Contents

This skill package includes:

• skill-definition.json – Structured component metadata
• quick-reference.md – Fast lookup guide
• examples/ – Code examples for common patterns
• troubleshooting.md – Common issues and solutions
• api-reference.md – Complete API documentation

Features

Component Coverage

• ✅ All 22 components documented
• ✅ Form components with Formik integration
• ✅ Layout and navigation components
• ✅ Data display components
• ✅ TypeScript type definitions

Capabilities

• 🔍 Component lookup and explanation
• 💻 Code example generation
• 🎯 Best practices guidance
• 🐛 Troubleshooting assistance
• 🔗 Integration examples (Formik, React Router)

Usage with Different AI Assistants

Claude Code

1. Copy skill to .claude/skills/:

mkdir -p .claude/skills
cp agent-skill/skill-definition.json .claude/skills/anysystem-design.json

2. Use in conversation:

How do I create a form with validation using AnySystem Design?

GitHub Copilot

1. Add to workspace settings:

{
  "github.copilot.advanced": {
    "customSkills": ["node_modules/@anysystem/design-agent-skill"]
  }
}

Custom GPT (ChatGPT)

1. Upload skill-definition.json as knowledge
2. Add instructions from gpt-instructions.md

LangChain / LlamaIndex

from langchain.tools import Tool

anysystem_skill = Tool(
    name="anysystem-design",
    description="Help with AnySystem Design React components",
    func=load_skill("path/to/agent-skill")
)

Component Quick Reference

Forms (9 components)

• Button, Input, PasswordInput, TelephoneInput
• Checkbox, Switch, FormControl, Label

Selection (4 components)

• Selectbox, AutoComplete, RadioGroup, DatePicker

Layout (3 components)

• Container, Row, Column

Navigation (2 components)

• Navbar, NavList

Data Display (2 components)

• DataTable, Text

Interactive (1 component)

• Modal

Layouts (2 components)

• SideMenuLayout, EmptyLayout

Example Queries

The skill can handle queries like:

• “How do I create a form with validation?”
• “Show me a complete login page example”
• “How to use DataTable with selection?”
• “Create a sidebar layout with navigation”
• “What props does the Modal component accept?”
• “How to integrate with Formik?”
• “DatePicker value format explanation”

Sample Responses

Query: “How do I use the Button component?”

The agent will provide:

1. Import statement
2. Basic usage example
3. Props explanation (variant, size, rounded)
4. Code examples for different variants
5. Advanced usage (with icons, styling)
6. Related components

Query: “Create a complete form with validation”

The agent will provide:

1. Formik + Yup setup
2. FormControl + FormInput usage
3. Error handling
4. Submit button
5. Complete working example
6. Best practices

Skill Structure

agent-skill/
├── README.md                 # This file
├── skill-definition.json     # Structured component data
├── quick-reference.md        # Quick lookup guide
├── api-reference.md          # Complete API docs
├── troubleshooting.md        # Common issues
├── examples/
│   ├── form-validation.md
│   ├── sidebar-layout.md
│   ├── data-table.md
│   └── modal-dialog.md
└── integrations/
    ├── formik.md
    ├── react-router.md
    └── typescript.md

Contributing

To update or improve this skill:

1. Fork this repository: https://github.com/freedomw1987/anysystem-design-skill
2. Make your changes to the skill files
3. Test with your AI assistant
4. Submit a pull request

Updating in a Parent Project

If you’re using this as a submodule:

cd agent-skill
git checkout main
git pull origin main
# Make your changes
git add .
git commit -m "Your changes"
git push origin main

# Update parent project to use new version
cd ..
git add agent-skill
git commit -m "Update agent-skill submodule"

Version

Current version: 0.0.1

This skill is maintained separately from the main AnySystem Design library to allow independent updates and versioning.

Repository

This is a standalone repository that can be used as:

• A git submodule in your main project
• An NPM package (when published)
• A direct clone for local development

License

Same as AnySystem Design library

Links

• Main Component Library
• Component Library NPM
• This Skill Repository

Support

For issues or questions:

• GitHub Issues: https://github.com/freedomw1987/anysystem-design-skill/issues
• Main Library Issues: https://github.com/freedomw1987/anysystem-design/issues
• Examples: See examples/ directory in this repository

Made for AI Assistants 🤖

This skill enables AI to help developers build better React applications with AnySystem Design.