SECURITY REVIEW
Not yet assessed
Review the original instructions and requested permissions before installing.
No security review is available for this catalog entry yet.
Design · Frontend / AGENT SKILL
bhawna-design-sync
0
Translate Bhawna Foundation Pencil designs into layouts, tokens, content, and component states.
Use when translating the Bhawna Foundation Pencil design into implementation, including reading the .pen file, extracting tokens and content, mapping desktop and mobile layouts, or inferring missing component states in the same style.
Understand the trade-offs.
SKILL QUALITY
Not yet assessed
How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.
No quality assessment is available for this catalog entry yet.
The full skill.
Original instructions from the publisher’s SKILL.md
# Bhawna Design Sync Read `references/design-map.md` before implementing a new page or section. ## Use this skill for - extracting page and section structure from `Bhawna-foundation.pen` - matching colors, typography, spacing, and hierarchy - mapping desktop and mobile variants into responsive React layouts - inferring hover, focus, empty, error, and loading states when the design does not show them ## Workflow 1. Read the `.pen` file first. If the Pencil app bridge is unavailable, parse the file directly as JSON. 2. Extract the page sections, visible copy, image URLs, and key tokens before coding. 3. Match layout hierarchy first, then visual polish. 4. Build one reusable pattern per repeated section type instead of duplicating markup. 5. When a state is missing, infer it from nearby patterns and the design tokens in the file. ## Design interpretation rules - Treat desktop and mobile frames as explicit guidance, not optional inspiration. - Preserve the project's blue, orange, slate, and soft-light palette. - Keep headings in Poppins and dense UI/body text in Inter unless a later phase changes the decision. - If a local image path in the `.pen` file is unavailable, replace it with a stylistically similar fallback and note the assumption. ## Output expectations - page map - section map - token map - content map - missing-state assumptions