Our review
Adds a new skill entry to the SkillsSection React component by inserting a correctly formatted JSX object into the skills array.
Strengths
- Enforces consistent formatting with existing entries
- Uses JSX fragments and proper class names for highlighting skill names
- Maintains a first-person professional tone
- Precisely targets the correct file and insertion point
Limitations
- Only applies to the specific SkillsSection.jsx file
- Relies on the existing pattern, which may change
- Does not handle adding multiple entries at once
When you need to add a single new skill to the skills section of a React-based portfolio or resume site.
When you need to restructure the skills component, change the overall design, or batch-insert many entries with different formats.
Security analysis
SafeThe skill instructs the AI to modify a specific file by appending a new JSX object, with no dangerous commands, exfiltration, or disabling of safety features. It is a low-risk file editing task.
No concerns found
Examples
Add a new skill entry for React to the skills array in SkillsSection.jsx.Insert 'TypeScript' as a skill in the SkillsSection component following the existing pattern.Update the skills array to include a new skill for Docker, using the same JSX format as the other entries.Add a new skill entry to the skills array in src/components/sections/SkillsSection.jsx.
The skill to add: $ARGUMENTS
Follow the exact pattern used by existing entries:
{
name: "Skill Name",
description: (<>Description text with <span className="font-semibold dark:text-white">Skill Name</span> highlighted on first mention. Additional detail about experience and usage.</>)
}
Rules:
- Bold the skill name on first mention using
<span className="font-semibold dark:text-white">Skill Name</span> - Bold other technology names mentioned using the same span pattern
- Write 2-4 sentences in a first-person professional tone matching existing entries
- Use JSX fragment syntax (
<>...</>) for the description value - Add the new entry at the end of the
skillsarray, before the closing] - Do not modify any existing entries
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.