Our review

This skill syncs the Bhawna Foundation Pencil design into React implementation by extracting page structure, tokens, and responsive mappings.

Depends on the specific .pen file format and Pencil tool schema
Does not handle complex animations or advanced interactions not shown in the design
Missing local images require manual fallback and annotation

When to use it

Use this skill when implementing a new page or section for the Bhawna Foundation website while faithfully matching the provided Pencil design.

When not to use it

Do not use it for projects without a Pencil design file or for purely functional changes unrelated to visual appearance.

Examples

Extract homepage structure

Read Bhawna-foundation.pen and generate a page map and section map for the homepage, including all visible copy and image URLs.

Map responsive layout

Extract the desktop and mobile frames from the .pen file for the services section and map them into a responsive React component.

Infer missing states

Using the design tokens from Bhawna-foundation.pen, infer hover, focus, and empty states for all interactive elements on the contact page.

name: bhawna-design-sync description: 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.

Bhawna Design Sync

Read references/design-map.md before implementing a new page or section.

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

Read the .pen file first. If the Pencil app bridge is unavailable, parse the file directly as JSON.
Extract the page sections, visible copy, image URLs, and key tokens before coding.
Match layout hierarchy first, then visual polish.
Build one reusable pattern per repeated section type instead of duplicating markup.
When a state is missing, infer it from nearby patterns and the design tokens in the file.

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.