create-astro-component - Create native Astro components from rendered site UI
Recreates rendered Jekyll site UI as clean native Astro components using live HTML, compiled CSS, screenshots, and project conventions.
Tags
Updated: 2026-09-28Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Ask for fidelity preference
- Inspect rendered HTML
- Collect compiled CSS rules
- Measure desktop and mobile layouts
- Classify component fidelity contract
- Build native Astro components
- Apply token-based SCSS styles
- Derive props from usage
Inputs
- Component scope request
- Live rendered pages
- Compiled stylesheet
- Desktop and mobile screenshots
- Layout measurements
- Jekyll usage sites
- User fidelity preferences
Outputs
- Astro component source file
- Scoped SCSS styles
- Component header comment
- Updated component implementation
Requirements
- Astro project
- astro/src/components directory
- Sass package
- Tokens and breakpoints files
- Access to live website
- Modern browser build target