Color Palette
Display color swatches with optional names, hover for values, click to copy.
<color-palette
colors="#6366f1,#8b5cf6,#a855f7,#d946ef"
names="Indigo,Violet,Purple,Fuchsia"
show-names>
</color-palette>
Type Specimen
Display fonts with typographic details, character sets, and size/weight scales.
<type-specimen
font-family="Georgia"
font-size="48"
show-metrics
show-characters>
</type-specimen>
User Persona
Display user personas in the Agile format with goals, frustrations, and behaviors.
Sarah has 8 years of experience in product management, starting at startups and now leading a team at a Series C company. She manages 3 product teams and oversees a roadmap with 50+ features.
- Streamline cross-team communication
- Reduce time spent in status meetings
- Have a single source of truth for project progress
- Enable data-driven decision making
- Too many disconnected tools (Jira, Slack, Notion, Figma)
- Difficulty getting executive stakeholder buy-in
- Spending 60% of time in meetings instead of strategy
- Unclear ownership across distributed teams
- Checks Slack 30+ times per day
- Prefers async communication when possible
- Uses keyboard shortcuts extensively
- Reviews metrics dashboard every morning
Recent CS graduate, 1 year of professional experience.
- Learn best practices from senior developers
- Contribute to meaningful projects
- Unclear code review expectations
- Outdated documentation
<user-persona
name="Sarah Chen"
role="Senior Product Manager"
age="34"
location="San Francisco, CA"
quote="I need tools that help me stay organized...">
<p slot="bio">Sarah has 8 years of experience...</p>
<ul slot="goals">...</ul>
<ul slot="frustrations">...</ul>
</user-persona>
User Story
Display user stories in the classic Agile format with acceptance criteria and tasks.
- Dashboard loads within 2 seconds for up to 50 projects
- All active projects display with color-coded status indicators
- Timeline view supports zoom from daily to quarterly views
- Filters available for team, status, and date range
- Export functionality for PDF and CSV formats
- Design high-fidelity mockups (Done)
- Implement timeline visualization component (In Progress)
- Build filter sidebar with all options
- Add export functionality
- Performance optimization for large datasets
This is a key feature for Q2 OKRs. Need to coordinate with the Analytics team for data access. Consider using virtual scrolling for performance.
- Alerts sent within 30 seconds of threshold breach
- Multiple notification channels (email, Slack, SMS)
- Reset email sent within 1 minute
- Link expires after 24 hours
<user-story
story-id="PROJ-142"
epic="Dashboard Redesign"
persona="Product Manager"
action="view all project timelines in a unified dashboard"
benefit="I can quickly identify bottlenecks..."
priority="high"
status="in-progress"
points="8">
<ul slot="acceptance-criteria">...</ul>
<ul slot="tasks">...</ul>
<p slot="notes">...</p>
</user-story>
Page Diagnostics
Run quality checks on the current page for markup, accessibility, and performance.
Click the diagnostic button in the bottom-right corner to open the diagnostics panel. This component analyzes the current page for common issues and links to external validators.
<!-- Add to any page for diagnostics -->
<page-diagnostics></page-diagnostics>
<!-- Auto-run tests on load -->
<page-diagnostics auto-run></page-diagnostics>
<!-- Position options: bottom-right, bottom-left, top-right, top-left -->
<page-diagnostics position="bottom-left"></page-diagnostics>