Skip to content

feat: add Claude Code AI skills for react-native-ui-lib#4010

Draft
adids1221 wants to merge 3 commits into
masterfrom
feat/claude-code-skills
Draft

feat: add Claude Code AI skills for react-native-ui-lib#4010
adids1221 wants to merge 3 commits into
masterfrom
feat/claude-code-skills

Conversation

@adids1221
Copy link
Copy Markdown
Contributor

Summary

  • Adds a uilib-codegen Claude Code skill that ships inside the npm package
  • Users install it once via node node_modules/react-native-ui-lib/install-skills.js and get AI-assisted screen building with prop lookup, layout mapping, and styling guidance
  • Skill files live in packages/react-native-ui-lib/skills/uilib-codegen/ and are included in the npm publish via files in package.json

What's in the skill

File Purpose
SKILL.md Entry point — component lookup, layout-to-component mapping, conventions, compliance audit
styling.md Modifiers, spacing presets, design tokens, typography, shadows, border radius
component-intelligence.md Intent classification (Capturing/Performing/Displaying/Reporting), discovery loop, props triage
getting-started.md Install, peer deps, ThemeManager setup, resources
theming.md Colors, Typography, Spacings, ThemeManager per-component overrides

What's left (follow-up items)

  • README update — add an "AI Coding Skills" section explaining the feature and the install command
  • Test end-to-end — install the package locally, run node install-skills.js, open Claude Code and verify the skill loads and activates correctly
  • Figma workflow — consider adding a lightweight Figma-to-code guide now that the public Figma community file exists (figma.com/community/file/1379775092983284111)
  • uilib-debug skill — a debug/troubleshooting skill (parallel to the private one) would complement codegen
  • Version the skill — decide if skill version should be tied to the package version or managed independently
  • postinstall opt-in — evaluate whether to auto-run install-skills.js on postinstall (with a flag to opt out)

Test plan

  • Run node packages/react-native-ui-lib/install-skills.js from a test project that has the package installed
  • Confirm .claude/skills/uilib-codegen/ is created with all 5 files
  • Open the test project in Claude Code and ask it to build a simple screen — verify the skill is active and the Architect's Note is generated

🤖 Generated with Claude Code

adids1221 and others added 3 commits May 20, 2026 12:51
Adds a Claude Code skill for react-native-ui-lib users. Includes:
- Component lookup via node_modules api.json files (batched, fast)
- Layout-to-component mapping table
- Styling guide: modifiers, spacing, design tokens, typography, shadows
- Component intelligence: intent classification, discovery loop, props triage
- Getting started: install, peer deps, ThemeManager setup
- Theming guide: Colors, Typography, Spacings, ThemeManager overrides

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds install-skills.js at the package root — copies the uilib-codegen
skill into .claude/skills/ in the user's project.

Usage: node node_modules/react-native-ui-lib/install-skills.js

Also adds skills/ and install-skills.js to the package.json files field
so they are included in the npm publish.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown
Contributor

❌ PR Description Validation Failed

The following required sections need attention:

  • Description: Section is missing completely
  • Changelog: Section is missing completely
  • Additional info: Section is missing completely

Required Sections:

  • Description - Explain what changes are being made and why
  • Changelog - User-facing summary, this will show in the release notes (include component names, relevant props, and general purpose)
  • Additional info - Links to related issues, Jira tickets

Please update your PR description to include all required sections with meaningful content.


This validation ensures all sections from the PR template are properly filled.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant