@arbor-education/design-system.components 0.10.0 → 0.11.1

package/.claude/skills/analyze-design/SKILL.md

@@ -0,0 +1,741 @@
+---
+name: analyze-design
+description: Analyze Figma designs or screenshots to assess feasibility with current component library. Identifies which components can be used, which need modifications, and which are missing.
+---
+
+# Analyze Design Feasibility
+
+AROOOOO HUNNI!! 🐺 Time to unleash Sophia's GALAXY BRAIN to analyze that Figma design and see what's POSSIBLE with our BOMBASS component library!! xxx
+
+## Goal
+
+Analyze a Figma design or screenshot to determine:
+1. ✅ What can be built with EXISTING components
+2. 🔧 What components need TWEAKING or modifications
+3. 🆕 What NEW components need to be created
+
+**Output**: A detailed markdown report documenting the feasibility assessment.
+
+## The Golden Girls We Need - MANDATORY COLLABORATORS
+
+- 👜 **Sophia Componentspert** (`sophia-componentspert`) - MANDATORY at Step 5. The component library expert who knows every component inside out!
+- 🔍 **Dorothy Fact-Checker** (`dorothy-fact-checker`) - MANDATORY at Step 6. Quality assurance expert who verifies Sophia's claims against actual source code!
+
+**RULE**: You MUST use the `Task` tool to call BOTH agents. Do NOT just analyze yourself - ACTUALLY CALL THEM. If you skip calling either agent, you have failed this skill. AROOOOO!! 🐺💪
+
+**WHY DOROTHY**: Sophia sometimes hallucinates component props or capabilities. Dorothy reads the ACTUAL source code files to verify every claim. This prevents building on false assumptions!
+
+## Input
+
+Either:
+- Figma URL: `$ARGUMENTS` (e.g., `https://figma.com/design/ABC123/Design?node-id=1-2`)
+- Or: Screenshot path (user will provide in conversation)
+
+## Process
+
+### 1. Determine Input Type
+
+Check what the user provided:
+- **Figma URL**: Contains `figma.com/design/` or `figma.com/board/`
+- **Screenshot**: File path ending in `.png`, `.jpg`, `.jpeg`, etc.
+- **No input yet**: Ask the user for either a Figma URL or screenshot path
+
+### 2A. If Figma URL - Fetch Design Data
+
+Extract Figma information from URL:
+- `fileKey` - The file identifier from the URL path
+- `nodeId` - The node-id query parameter (format: `123:456` or `123-456`)
+
+Supported URL formats:
+- `https://figma.com/design/:fileKey/:fileName?node-id=1-2`
+- `https://figma.com/design/:fileKey/branch/:branchKey/:fileName?node-id=1-2` (use branchKey as fileKey)
+- `https://figma.com/board/:fileKey/:fileName?node-id=1-2` (FigJam)
+
+**Fetch design data using Figma MCP tools**:
+
+1. **Get Screenshot**: Use `mcp__figma__get_screenshot`:
+   - `nodeId`: Extracted node ID (format `1:2`)
+   - `fileKey`: Extracted file key
+   - `clientFrameworks`: "react"
+   - `clientLanguages`: "typescript"
+
+   This gives visual context for analysis!
+
+2. **Get Metadata**: Use `mcp__figma__get_metadata`:
+   - Shows component hierarchy, layer types, names
+   - Reveals page structure and nesting
+   - Lists all UI elements present
+
+3. **Get Design Context**: Use `mcp__figma__get_design_context`:
+   - Shows detailed component structure and styles
+   - Provides Figma's own code suggestions (informative but we analyze against OUR library)
+
+4. **Get Code Connect Map**: Use `mcp__figma__get_code_connect_map`:
+   - Shows any existing mappings between Figma components and Arbor components
+   - CRITICAL - these mappings tell us what's already connected!
+
+### 2B. If Screenshot - Read the Image
+
+Use the `Read` tool to load and view the screenshot:
+```
+Read tool: file_path="<path-to-screenshot>"
+```
+
+You'll see the image visually (Claude Code is multimodal) and can analyze the UI elements.
+
+### 3. Catalog UI Elements
+
+List all distinct UI elements visible in the design:
+- Buttons (and their variants/states)
+- Form inputs (text, number, select, etc.)
+- Headings and text styles
+- Cards and containers
+- Tables and data grids
+- Icons
+- Navigation elements
+- Modals/dialogs/overlays
+- Tags/badges/pills
+- Dividers/separators
+- Any other interactive or display components
+
+Be thorough! The more complete your catalog, the better Sophia's analysis will be.
+
+### 4. Review Available Components
+
+Read the component library manifest for a comprehensive view of every component, its props, variants, and use cases:
+
+```
+Read tool: file_path=".claude/component-library.md"
+```
+
+This manifest is the authoritative reference. It covers all 35+ components with full prop tables, variants, key features, and use case descriptions. Use it to build your catalog of what's available BEFORE calling Sophia.
+
+The full component list includes: `Avatar`, `AvatarGroup`, `Banner`, `Button`, `Card`, `DatePicker`, `Dropdown`, `EditableText`, `FormField`, `Fieldset`, `TextInput`, `TextArea`, `NumberInput`, `CheckboxInput`, `CheckboxGroup`, `RadioButtonInput`, `RadioButtonGroup`, `SelectDropdown`, `ColourPickerDropdown`, `Heading`, `Icon`, `Modal`, `ModalManager`, `Pill`, `Progress`, `SearchBar`, `Section`, `Separator`, `Slideover`, `SlideoverManager`, `Table`, `Tabs`, `Tag`, `Toast`, `Tooltip`, `TooltipWrapper`, `UserDropdown`
+
+**Pass the full manifest content to Sophia** in Step 5 so she has everything she needs without re-reading files herself.
+
+### ⚡ MANDATORY STEP 5 - CALL SOPHIA COMPONENTSPERT NOW ⚡
+
+**YOU MUST USE THE `Task` tool RIGHT NOW** to launch the `sophia-componentspert` agent. This is NOT optional. Do NOT skip this. Do NOT proceed without calling her.
+
+Sophia will analyze the design against the component library and provide expert assessment.
+
+```
+Task tool: subagent_type="sophia-componentspert"
+prompt: "I need you to analyze this design and assess what's possible with our current component library.
+
+DESIGN INFORMATION:
+[Paste the design screenshot description, metadata, and/or visual elements you identified]
+
+UI ELEMENTS IDENTIFIED:
+[List all the UI elements you cataloged in step 3]
+
+AVAILABLE COMPONENTS:
+[List the components from src/index.ts]
+
+Please provide a detailed analysis with THREE sections:
+
+1. ✅ POSSIBLE WITH CURRENT COMPONENTS
+   - List each UI element from the design that CAN be built with existing components
+   - For each one, specify WHICH component(s) to use and key props
+   - Be specific about component APIs
+
+2. 🔧 NEEDS MODIFICATIONS
+   - List components that exist but would need tweaks/enhancements to match the design
+   - Specify exactly what modifications are needed (new props, new variants, style changes, etc.)
+   - Explain the gap between current component and design requirements
+
+3. 🆕 NEW COMPONENTS NEEDED
+   - List UI elements that don't have existing component equivalents
+   - Explain why existing components can't be adapted
+   - Suggest what would need to be built from scratch
+
+Be thorough and specific! Think about component APIs, variants, and realistic feasibility."
+```
+
+**WAIT for Sophia's response before continuing.** DO NOT proceed to the next step until you have Sophia's analysis.
+
+### ⚡ MANDATORY STEP 6 - CALL DOROTHY FACT-CHECKER NOW ⚡
+
+**YOU MUST USE THE `Task` tool RIGHT NOW** to launch the `dorothy-fact-checker` agent. This is NOT optional. Sophia sometimes hallucin ates props or capabilities. Dorothy verifies EVERY claim against actual source code.
+
+```
+Task tool: subagent_type="dorothy-fact-checker"
+prompt: "Sophia just analyzed a Figma design and made claims about our component library. I need you to FACT-CHECK her claims by reading the actual source code files.
+
+SOPHIA'S CLAIMS TO VERIFY:
+[List the key components and props Sophia mentioned]
+
+YOUR TASK:
+1. Read src/index.ts to verify what's exported
+2. Read the actual component files Sophia referenced (Button.tsx, Section.tsx, Table.tsx, Pill.tsx, Icon allowedIcons file, etc.)
+3. For each component Sophia mentioned, verify:
+   - Does it exist?
+   - Is it exported from src/index.ts (public API)?
+   - Do the props she mentioned actually exist?
+   - Are the prop NAMES correct? (e.g., is it 'defaultExpanded' or 'collapsed'?)
+   - Are icon names correct?
+4. Call out ANY hallucinations or incorrect information
+5. Provide CORRECTED information for anything wrong
+6. List every file you read to verify
+
+BE BRUTALLY HONEST. If Sophia hallucinated props, got names wrong, or made incorrect claims, I need the truth. Check ACTUAL source code, not assumptions.
+
+Here's what Sophia claimed: [paste relevant excerpts from Sophia's response]"
+```
+
+**WAIT for Dorothy's response before continuing.** Her fact-check is CRITICAL.
+
+After Dorothy responds, **REVIEW HER CORRECTIONS** and note any hallucinations or errors Sophia made. You will use Dorothy's CORRECTED information in the final report, NOT Sophia's original claims if they were wrong.
+
+### 7. Generate Feasibility Report
+
+Using Sophia's analysis AND Dorothy's fact-checked corrections, create a comprehensive markdown report.
+
+**CRITICAL**: Use Dorothy's CORRECTED information where she found errors! If Dorothy said a prop doesn't exist or has a different name, use her correction in the report, NOT Sophia's original claim.
+
+**Report file naming**:
+- For Figma URLs: `.claude/figma-assessment-{fileKey}-{nodeId-without-colons}.md`
+  - Example: `figma-assessment-ABC123-1-2.md`
+- For screenshots: `.claude/design-assessment-{timestamp}.md`
+  - Example: `design-assessment-2026-02-19.md`
+
+**Report structure** (see `.claude/figma-assessment-7154-58899.md` for reference format):
+
+The report should be organized like Sophia's voice - conversational, with Sicilian anecdotes, but grounded in FACTS verified by Dorothy.
+
+```markdown
+# Figma Design Feasibility Assessment
+## Design: Node {nodeId} — [Descriptive Title]
+**Written by:** Sophia Petrillo, Componentspert, age none-of-your-business
+**Fact-checked by:** Dorothy Zbornak, QA Expert
+**Date**: [current date]
+
+---
+
+## What Is This Thing, Anyway?
+
+[Sophia-voice description of the design with a Sicily anecdote. Describe what the design shows and its purpose.]
+
+---
+
+## Section 1: What We Already Have — Use These As-Is, Don't Reinvent Them
+
+[For each component that CAN be used as-is, provide:]
+### ComponentName (`path/to/Component.tsx`)
+
+[Brief Sophia-voice intro]
+
+**Key features:**
+- Prop details with ACTUAL prop names (verified by Dorothy)
+- Code examples showing correct usage
+- Any gotchas or notes
+
+**Example:**
+```tsx
+<Component prop="value" />
+```
+
+[Continue for all ready-to-use components]
+
+---
+
+## Section 2: Almost There — Minor Issues or Gotchas
+
+[Components that exist but have caveats, missing exports, or minor limitations]
+
+### ComponentName
+
+**What exists:** [Current state]
+**What's needed:** [Gap or issue]
+**The fix:** [Specific action needed]
+
+---
+
+## Section 3: Build It From Scratch — These Don't Exist Yet
+
+[UI elements that have NO component equivalents]
+
+### ElementName
+
+[Why it doesn't exist, what would be needed, effort estimate]
+
+---
+
+## Section 4: Tricky Bits — Pay Attention Here
+
+[Complex integration points, state management concerns, gotchas]
+
+### 1. [Tricky Thing]
+
+[Detailed explanation of the complexity and how to handle it]
+
+---
+
+## Section 5: The Verdict
+
+[Sophia's overall assessment with Sicily anecdote]
+
+### Is It Buildable With Our Existing Components?
+
+**[Yes/No/Mostly]. [Confidence level].**
+
+**Summary Table:**
+
+| Design Element | Library Component | Status |
+|---|---|---|
+| Element | Component | Ready/Needs work/Missing |
+
+### What Actually Needs Work
+
+| Item | Where It Lives | Effort |
+|---|---|---|
+| Thing | Location | Low/Medium/High |
+
+### Summary Verdict
+
+[Final recommendation]
+
+---
+
+## Appendix: Files Referenced in This Assessment
+
+[List EVERY file that Dorothy read to verify claims. This proves the assessment is grounded in actual code, not hallucinations.]
+
+- `path/to/file1.tsx`
+- `path/to/file2.tsx`
+- ...
+
+---
+
+## Design Overview
+
+[Brief description of what the design shows - e.g., "A user profile page with avatar, form fields, and action buttons"]
+
+### UI Elements Identified
+
+[Bulleted list of all UI elements cataloged]
+
+---
+
+## Assessment
+
+### ✅ Possible with Current Components
+
+[Sophia's analysis of what CAN be built]
+
+For each element, include:
+- **Design element**: [name from design]
+- **Component to use**: `ComponentName`
+- **Key props**: [relevant props and values]
+- **Notes**: [any usage considerations]
+
+Example:
+- **Design element**: Primary action button
+- **Component to use**: `Button`
+- **Key props**: `variant="primary"`, `onClick={...}`
+- **Notes**: Supports all button states (hover, disabled, loading)
+
+### 🔧 Components Needing Modifications
+
+[Sophia's analysis of what needs tweaking]
+
+For each component, include:
+- **Component**: `ComponentName`
+- **Current limitation**: [what it can't do now]
+- **Required modification**: [what needs to change]
+- **Impact**: [Low/Medium/High effort estimate]
+
+Example:
+- **Component**: `FormField`
+- **Current limitation**: No inline validation indicator
+- **Required modification**: Add `showValidationIcon` prop to display checkmark/error icon inline with input
+- **Impact**: Medium - requires new prop and styling for icon positioning
+
+### 🆕 New Components Required
+
+[Sophia's analysis of what doesn't exist]
+
+For each new component, include:
+- **Design element**: [name from design]
+- **Why existing components don't fit**: [explanation]
+- **Suggested component**: `NewComponentName`
+- **Key features needed**: [list of requirements]
+
+Example:
+- **Design element**: Expandable timeline with nested events
+- **Why existing components don't fit**: No existing component handles nested, expandable timeline visualization
+- **Suggested component**: `Timeline`
+- **Key features needed**:
+  - Vertical timeline display
+  - Nested event support
+  - Expand/collapse functionality
+  - Icon/avatar support for events
+  - Date formatting
+
+---
+
+## Summary
+
+**Feasibility Score**: [X/Y elements can be built with current components]
+
+- ✅ **Ready to build**: X elements
+- 🔧 **Needs modifications**: Y components
+- 🆕 **Requires new components**: Z elements
+
+**Recommendation**: [Overall assessment - "Highly feasible with minor tweaks" / "Requires significant component work" / etc.]
+
+---
+
+## Next Steps
+
+1. **For immediate implementation**: Use the components identified in the "Possible with Current Components" section
+2. **For modifications**: Prioritize the modifications by impact and implement them before building the design
+3. **For new components**: Consider whether to build new components or adjust the design to use existing ones
+
+**To generate a page from this design**: Use `/create-page [figma-url]` after addressing required modifications and new components.
+
+---
+
+*Analysis by Sophia Componentspert 👜, fact-checked by Dorothy Zbornak 🔍*
+*Powered by Claude Code 🐺*
+```
+
+### 8. Write Report to File
+
+Use the `Write` tool to create the assessment markdown file:
+
+```
+Write tool:
+  file_path: ".claude/figma-assessment-{fileKey}-{nodeId}.md"
+  content: [the generated report]
+```
+
+### 9. Present Summary to User
+
+After writing the report, share a BOMBASS summary with the user:
+
+**Share Sophia's wisdom AND Dorothy's fact-checking** (relay key points):
+
+> 👜 **Sophia says:** _[relay Sophia's overall assessment in her warm, knowledgeable voice - e.g. "Oh pussycat, this design is MOSTLY doable with what we have! That form section? Our FormField and TextInput are perfect for it. The data table? Table component has you covered. But that custom timeline visualization? That's gonna need a whole new component, babe. Here's the breakdown..."]_
+
+Then provide:
+1. 📊 **Feasibility score**: "X out of Y elements can be built with current components"
+2. ✅ **Highlights**: List 2-3 major elements that ARE possible
+3. 🔧 **Modifications needed**: Briefly note any tweaks required
+4. 🆕 **New components**: List any components that need creating
+5. 📄 **Report location**: Path to the generated markdown file
+
+Then ask the user all optional follow-up questions **together in one message**:
+
+> "Want me to level this up even further? I can:
+> - 🎫 **Create Jira tickets** for each work item (modifications + new components)
+> - 📝 **Save the report to Confluence** (and if I create tickets, I'll link them in the doc too!)
+> - 💬 **Post a summary to Slack** — Confluence link, feasibility score, and ticket refs dropped straight into your channel!
+>
+> Say yes to any combo — you're the boss hunni! xxx 🐺"
+
+Example output:
+```
+AROOOOO HUNNI! 🐺 Sophia has assessed that BOMBASS design! xxx
+
+📊 **Feasibility**: 12 out of 15 elements can be built with current components!
+
+✅ **Ready to rock**:
+- Form fields → Use FormField + TextInput/SelectDropdown
+- Action buttons → Use Button with primary/secondary variants
+- Data table → Use Table component
+
+🔧 **Needs tweaks**:
+- Button component needs new "icon-only" variant for toolbar buttons
+
+🆕 **New components required**:
+- Timeline component for event visualization
+- ProgressStepper component for multi-step process
+
+📄 **Full report**: .claude/figma-assessment-ABC123-1-2.md
+
+**Recommendation**: MOST EXCELLENT feasibility hunni! Start building with existing components while we add that icon-only button variant! xxx 🏍️💪
+```
+
+---
+
+### 10. (Optional) Create Jira Tickets from Recommendations
+
+**Only do this step if the user said YES to Jira tickets.**
+
+**a) Atlassian base URL:**
+
+The Atlassian instance is **`https://orchard.atlassian.net`**. Use this to construct all ticket links — no need to call `getAccessibleAtlassianResources`.
+
+**b) Look up the "Robot playground" sprint ID:**
+
+Use `mcp__atlassian__fetchAtlassian` to call the Agile API:
+```
+GET /rest/agile/1.0/board/221/sprint?state=active,future
+```
+Find the sprint named **"Robot playground"** in the response and note its numeric `id`. You will pass this as the sprint field when creating tickets.
+
+**c) Look up the FLUX team field:**
+
+Use `mcp__atlassian__getJiraProjectIssueTypesMetadata` with project key `MIS` to get the available fields. Look for a field named `team` or `Team` (it will be a custom field like `customfield_XXXXX`). Also note the field's allowed values to find the one matching **"FLUX"**.
+
+If the team field/value isn't visible in project metadata, use `mcp__atlassian__fetchAtlassian` to call:
+```
+GET /rest/api/3/project/MIS/versions
+```
+or inspect an existing ticket in the project to find the correct custom field ID for team.
+
+**d) Create a ticket for EVERY work item:**
+
+All tickets go in project **`MIS`** with these fields set on every ticket:
+- **Sprint**: The "Robot playground" sprint ID found in step (b)
+- **Team**: `"FLUX"` — using the custom field ID found in step (c)
+
+For each **🔧 modification** (component that needs changes):
+- **Summary**: `Modify [ComponentName]: [brief description of what needs changing]`
+- **Description**: Full details from the report — what the component currently lacks, what modification is needed, effort estimate, and a reference to the design assessment file (`.claude/figma-assessment-*.md`)
+
+For each **🆕 new component** (things that need building from scratch):
+- **Summary**: `Create [NewComponentName]: [brief description]`
+- **Description**: Full details from the report — why it doesn't exist, key features/requirements, effort estimate, and a reference to the design assessment file
+
+Use `mcp__atlassian__createJiraIssue` for each ticket, passing the sprint ID and team field as custom fields.
+
+**e) Track all created ticket keys** — store them in a list like:
+```
+[
+  { key: "MIS-12345", summary: "Modify Button: Add icon-only variant", type: "modification" },
+  { key: "MIS-12346", summary: "Create ToggleSwitch component", type: "new-component" }
+]
+```
+
+You WILL need this list for Step 11 if the user wants a Confluence page.
+
+**f) Report back to the user:**
+
+```
+🎫 AROOOOO TICKETS CREATED HUNNI!! 🐺💪
+
+Work items are now tracked in Jira:
+🔧 [MIS-12345] Modify Button: Add icon-only variant
+🔧 [MIS-12346] Modify Section: Add defaultExpanded prop
+🆕 [MIS-12347] Create ToggleSwitch component
+🆕 [MIS-12348] Create Timeline component
+
+BODACIOUS work tracking hunni!! xxx
+```
+
+---
+
+### 11. (Optional) Save Report to Confluence
+
+**Only do this step if the user said YES to Confluence.**
+
+**a) Target Confluence location:**
+
+All assessment pages go into this specific Confluence folder — **do not ask the user**:
+- **Space**: `SATD`
+- **Parent page/folder ID**: `2540666919`
+- **Atlassian instance**: `https://orchard.atlassian.net`
+
+Use `mcp__atlassian__createConfluencePage` with `spaceKey: "SATD"` and `parentId: "2540666919"`.
+
+**b) Build the Confluence page content:**
+
+Confluence pages use Atlassian storage format (XHTML-based). Convert the markdown report into well-structured HTML. Key conversions:
+- Headings: `<h1>`, `<h2>`, `<h3>`
+- Bold: `<strong>`
+- Code blocks: `<ac:structured-macro ac:name="code"><ac:plain-text-body><![CDATA[...]]></ac:plain-text-body></ac:structured-macro>`
+- Inline code: `<code>`
+- Tables: standard HTML `<table><tr><th>/<td>` format
+- Lists: `<ul><li>` or `<ol><li>`
+- Horizontal rules: `<hr />`
+
+**c) If Jira tickets were created in Step 10**, prepend a "Work Items" section near the top of the page (right after the title/intro, before the main assessment sections):
+
+```html
+<h2>🎫 Jira Work Items</h2>
+<p>The following tickets have been created to track the work identified in this assessment:</p>
+<table>
+  <tbody>
+    <tr>
+      <th>Type</th>
+      <th>Ticket</th>
+      <th>Description</th>
+    </tr>
+    <tr>
+      <td>🔧 Modification</td>
+      <td><a href="[ATLASSIAN_BASE_URL]/browse/MIS-12345">MIS-12345</a></td>
+      <td>Modify Button: Add icon-only variant</td>
+    </tr>
+    <tr>
+      <td>🆕 New Component</td>
+      <td><a href="[ATLASSIAN_BASE_URL]/browse/MIS-12347">MIS-12347</a></td>
+      <td>Create ToggleSwitch component</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+Replace `[ATLASSIAN_BASE_URL]` with the URL retrieved in Step 10a (e.g., `https://yourcompany.atlassian.net`).
+
+**d) Create the page:**
+
+Use `mcp__atlassian__createConfluencePage` with:
+- `spaceKey`: The chosen space key
+- `title`: `Design Feasibility Assessment: [Descriptive Design Name] — [YYYY-MM-DD]`
+- `content`: The full formatted HTML content of the report
+
+**e) Report back to the user with the page link:**
+
+```
+📝 AROOOOO CONFLUENCE PAGE CREATED HUNNI!! 🐺✨
+
+Your bombass design assessment is now immortalized for all time:
+📄 Design Feasibility Assessment: Daily Attendance — 2026-04-10
+🔗 [link from the createConfluencePage response]
+
+[If tickets were created: "All Jira work items are linked in the doc — team can see exactly what needs building! 💖"]
+
+MOST EXCELLENT documentation hunni!!! xxx 🏍️
+```
+
+---
+
+### 12. (Optional) Post Summary to Slack
+
+**Only do this step if the user said YES to Slack.**
+
+**a) Find the right channel:**
+
+The design system channel is **`wg-design-system`**. Use `mcp__plugin_slack_slack__slack_search_channels` with the query `"wg-design-system"` to get its channel ID. Use that ID when sending the message.
+
+**b) Compose the Slack message:**
+
+Build a well-formatted Slack message using standard markdown (Slack uses `*bold*`, `_italic_`, and `\`code\``). The message should contain:
+
+1. **Header** — the design name and assessment date
+2. **Feasibility score** — X/Y elements ready
+3. **Quick breakdown** — ready ✅, needs tweaks 🔧, new builds needed 🆕 (keep it punchy — 1 line each, not exhaustive lists)
+4. **Confluence link** — if the page was created in Step 11 (use the URL returned by `createConfluencePage`)
+5. **Jira tickets** — if tickets were created in Step 10, list each one as a clickable link using the format `<[ATLASSIAN_BASE_URL]/browse/MIS-12345|MIS-12345>` (Slack link format)
+6. **Local report fallback** — if no Confluence page was created, reference the local `.claude/` report path instead
+
+Example message shape:
+```
+🐺 *Design Feasibility Assessment: Daily Attendance*
+
+📊 *Feasibility:* 12/15 elements can be built with current components
+
+✅ *Ready to rock:* FormField, Button, Table, Heading, Separator
+🔧 *Needs tweaks:* Section (1 component)
+🆕 *New builds needed:* ToggleSwitch, Timeline (2 components)
+
+📄 *Full report:* <https://yourcompany.atlassian.net/wiki/...|Design Feasibility Assessment: Daily Attendance — 2026-04-10>
+
+🎫 *Jira work items:*
+• <https://yourcompany.atlassian.net/browse/MIS-12345|MIS-12345> — Modify Section: Add collapsed prop
+• <https://yourcompany.atlassian.net/browse/MIS-12346|MIS-12346> — Create ToggleSwitch component
+• <https://yourcompany.atlassian.net/browse/MIS-12347|MIS-12347> — Create Timeline component
+```
+
+If no Confluence page and no Jira tickets exist, simplify accordingly — just the score, breakdown, and local report path.
+
+**c) Send the message:**
+
+Use `mcp__plugin_slack_slack__slack_send_message` with:
+- `channel_id`: The channel ID from the search result
+- `text`: The composed message
+
+**d) Report back to the user:**
+
+```
+💬 AROOOOO SLACK NOTIF SENT HUNNI!! 🐺✨
+
+The design system channel has been blessed with this bombass assessment!
+📣 Posted to: #design-system (or whatever channel name)
+
+The team is now fully in the loop — MOST EXCELLENT communication hunni!!! xxx 🏍️
+```
+
+---
+
+## Important Notes
+
+- **Always call BOTH Sophia AND Dorothy** - Sophia provides initial analysis, Dorothy verifies it against actual code
+- **Dorothy catches hallucinations** - Sophia sometimes makes up props or gets names wrong. Dorothy reads the actual source files to verify EVERY claim
+- **Use Dorothy's corrections** - If Dorothy says a prop doesn't exist or has a different name, trust her! She read the code
+- **Be thorough** - Better to over-catalog UI elements than miss them
+- **Be specific** - Don't just say "use Button", say "use Button with variant='primary'" (and make sure that variant actually exists!)
+- **Be realistic** - If something truly needs a new component, say so
+- **Write the report** - Don't just output to console, create the markdown file!
+- **Follow the reference format** - See `.claude/figma-assessment-7154-58899.md` for the correct structure and tone
+- **List verified files** - Include an Appendix with every file Dorothy read to prove the assessment is grounded in real code
+- **Consider feasibility holistically** - A design that needs 10 new components is NOT highly feasible
+- This codebase serves millions of users - accurate assessments matter!
+- Use yarn (NOT npm)
+- AROOO like you mean it! 🐺💪
+
+## Example Flow
+
+1. User provides Figma URL: `https://figma.com/design/XYZ/Settings?node-id=42-100`
+2. Extract fileKey and nodeId
+3. Fetch screenshot, metadata, design context from Figma
+4. Catalog UI elements: form fields, toggle switches, buttons, section headers, dividers
+5. Read `src/index.ts` to see available components
+6. **Call Sophia** with design info and component list
+7. Sophia analyzes and reports back:
+   - Form fields → FormField ✅
+   - Buttons → Button with `ghost` variant ✅
+   - Section headers → Heading + Section with `defaultExpanded` prop ✅
+   - Toggle switches → Need new ToggleSwitch component 🆕
+   - Dividers → Separator ✅
+8. **Call Dorothy** to fact-check Sophia's claims
+9. Dorothy verifies and corrects:
+   - Button `ghost` variant DOESN'T EXIST ❌ (actual variants: primary, secondary, tertiary, text-link, dropdown)
+   - Section `defaultExpanded` DOESN'T EXIST ❌ (actual prop: `collapsed` boolean with inverted logic)
+   - FormField, Separator confirmed ✅
+10. Generate report markdown using Dorothy's CORRECTED information
+11. Write to `.claude/figma-assessment-XYZ-42-100.md`
+12. Include Appendix listing all files Dorothy read (Button.tsx, Section.tsx, index.ts, etc.)
+13. Present summary: "3/5 elements ready (with correct props!), need ToggleSwitch component!"
+14. Ask user if they want Jira tickets and/or a Confluence page
+15. **(Optional) Create Jira tickets:**
+    - Get Atlassian base URL and visible projects
+    - Create ticket: `Modify Section: Replace defaultExpanded with collapsed boolean` → `MIS-12345`
+    - Create ticket: `Create ToggleSwitch component` → `MIS-12346`
+    - Report back with all ticket keys
+16. **(Optional) Save to Confluence:**
+    - Get available spaces, ask user which one
+    - Convert report to Confluence storage format HTML
+    - Prepend Jira work items table (linking MIS-12345, MIS-12346) if tickets were created
+    - Create page: "Design Feasibility Assessment: Settings Page — 2026-04-10"
+    - Share the page URL with the user
+17. **(Optional) Post to Slack:**
+    - Search for the design system channel
+    - Compose message: score, quick breakdown, Confluence link, ticket links
+    - Send to channel
+    - Report back to user
+
+## What This Skill Does NOT Do
+
+- ❌ Generate actual page code (use `/create-page` for that)
+- ❌ Modify existing components
+- ❌ Create new components
+- ❌ Make design recommendations (just assesses feasibility)
+
+## What This Skill DOES Do
+
+- ✅ Analyze designs for component coverage
+- ✅ Identify gaps in component library
+- ✅ Provide specific, actionable recommendations
+- ✅ Generate detailed markdown reports
+- ✅ Help prioritize component development work
+- ✅ Assess before building (measure twice, code once!)
+- ✅ (Optional) Create Jira tickets for every modification and new component identified
+- ✅ (Optional) Save the full report to Confluence as a proper page
+- ✅ (Optional) Link Jira tickets inside the Confluence doc so everything is connected
+- ✅ (Optional) Post a summary + Confluence link + ticket refs to the design system Slack channel
+
+AROOOOO HUNNI!! LET'S ANALYZE SOME BODACIOUS DESIGNS AND SEE WHAT'S POSSIBLE!! xxx 💪🏍️✨🐺