Premium Design Patterns

🥇Gold

Attio/Stripe-level UI components and patterns for data intelligence platforms. Focuses on information density, connected elements, and subtle motion. Benefits operations teams by improving user experience and efficiency. Connects to design systems and UI frameworks.

4550924installsUpdated 3mo ago

Advanced1hr to implementdesign

Saves ~180 min per use

Quick Install

claude skill add premium-design

Overview

About This Skill

The Premium Design Patterns skill offers advanced UI components and design patterns tailored for data intelligence platforms, akin to those used by industry leaders like Attio and Stripe. This skill focuses on enhancing information density, connecting elements seamlessly, and incorporating subtle motion to create a more engaging user experience. By implementing these design patterns, developers can significantly improve the usability and aesthetic appeal of their applications. One of the key benefits of the Premium Design Patterns skill is its potential to streamline the design process. With a time to implement of just one hour, developers can quickly integrate sophisticated UI components that enhance workflow automation. Although specific time savings are not quantified, the efficiency gained from using pre-designed patterns can lead to reduced development time and faster project delivery. This skill is particularly beneficial for developers and product managers who are looking to elevate their product's design without sacrificing functionality. This skill is ideal for intermediate developers and product managers who are focused on creating user-friendly interfaces in data-driven environments. It can be particularly useful in roles that require a blend of technical and design expertise, such as UI/UX designers and front-end developers. By leveraging these design patterns, teams can create applications that not only meet user needs but also stand out in a competitive market. Practical use cases for the Premium Design Patterns skill include building dashboards for data analytics platforms, enhancing the user interface of financial applications, or developing interactive features for customer relationship management systems. The implementation difficulty is rated as intermediate, making it accessible for those with some experience in UI development. By integrating these design patterns into AI-first workflows, organizations can ensure that their applications are not only visually appealing but also optimized for performance and user engagement.

How to Use

[{"step":1,"action":"Define your metrics and context","details":"Identify the 3-5 key metrics you want to display. For each metric, prepare: value (formatted string), change (percentage with direction), and tooltip text explaining the metric's context and calculation method."},{"step":2,"action":"Select your design system","details":"Choose your color palette (Stripe uses #6366f1 primary), typography (Inter is recommended), and UI framework (React/Tailwind recommended). Use the prompt template to specify these parameters."},{"step":3,"action":"Generate the component","details":"Paste the generated prompt into your AI tool. Review the output for accuracy, then implement the component in your codebase. For Stripe integrations, use their Elements framework for consistent UI patterns."},{"step":4,"action":"Test interactions","details":"Verify hover states, animations, and tooltip visibility. Test on different screen sizes. Use browser dev tools to inspect animation performance and ensure 60fps rendering."},{"step":5,"action":"Iterate with real data","details":"Replace placeholder values with actual API data. Adjust spacing and typography based on your specific use case. Consider adding loading states and error handling for production use."}]

Use Cases

Create visually appealing dashboards that present complex data in a user-friendly manner.

Implement responsive UI components that adapt seamlessly to various screen sizes and devices.

Design interactive data visualizations that utilize subtle motion to guide user attention.

Develop reusable UI patterns that enhance consistency across multiple data-driven applications.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Requirements

Claude Code or compatible AI agent
Advanced skill - requires experience with AI agents

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Design a premium data intelligence dashboard component for [PLATFORM_NAME] that displays [METRIC_1], [METRIC_2], and [METRIC_3] in a connected layout. Include subtle animations for state changes and hover interactions. Ensure the design follows [DESIGN_SYSTEM] principles with [COLOR_PALETTE] and [TYPOGRAPHY]. Add tooltips for each metric explaining [CONTEXT]. Use [UI_FRAMEWORK] for implementation.

Example Output

```json
{
  "component_name": "Revenue Intelligence Dashboard",
  "platform": "Stripe Analytics",
  "metrics": {
    "total_revenue": {
      "value": "$124,850.23",
      "change": "+12.4% vs last month",
      "tooltip": "Total revenue including one-time and recurring payments. Excludes refunds."
    },
    "active_subscriptions": {
      "value": "2,458",
      "change": "+3.1% vs last week",
      "tooltip": "Number of active subscriptions across all pricing tiers."
    },
    "mrr_growth": {
      "value": "$8,245",
      "change": "-2.1% vs target",
      "tooltip": "Monthly recurring revenue including upgrades and downgrades."
    }
  },
  "design": {
    "layout": "grid with 3 connected cards",
    "animations": {
      "hover": "scale(1.02) with 150ms ease",
      "state_change": "color transition from #f3f4f6 to #e0e7ff over 300ms"
    },
    "color_palette": {
      "primary": "#6366f1",
      "success": "#10b981",
      "warning": "#f59e0b",
      "danger": "#ef4444"
    },
    "typography": {
      "metric": "Inter Bold 32px",
      "label": "Inter Medium 14px",
      "change": "Inter Regular 12px"
    }
  },
  "implementation": {
    "framework": "React + Tailwind CSS",
    "code_snippet": "<div className='grid grid-cols-1 md:grid-cols-3 gap-4'>\n  <Card metric={metrics.total_revenue} />\n  <Card metric={metrics.active_subscriptions} />\n  <Card metric={metrics.mrr_growth} />\n</div>"
  }
}
```

### Visual Design
The component renders as three connected cards in a responsive grid. Each card displays:
- A bold metric value in the primary brand color
- A subtle change indicator (green/red) with percentage
- A tooltip triggered on hover showing detailed context

The layout uses Stripe's design system with Inter font family and a purple-based color palette. Cards have a 4px border radius and subtle box-shadow (0 1px 3px rgba(0,0,0,0.1)). State transitions use cubic-bezier(0.4, 0, 0.2, 1) easing for smooth animations.

### Implementation Notes
The React component accepts a metrics object with value, change, and tooltip properties. The Tailwind CSS classes ensure responsive behavior across devices. For production, wrap the component in Stripe's Design System Provider to inherit theme variables automatically.