skills.rest
Bainbridge-Growth
Bainbridge-GrowthOFFICIAL
Explore all skills by this author →
Website𝕏@drivepoint_ioGitHub

Artifact Style Guide

Standardize React component visual design and technical implementation for Drivepoint.

1|Updated Mar 2, 2026
Search Tags:#branding#react#ui/ux#style guide#react components
One-click install
npx skills add https://github.com/Bainbridge-Growth/drivepoint-plugins --skill artifact-style-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Artifact Style Guide
Source: https://github.com/Bainbridge-Growth/drivepoint-plugins/tree/main/plugins/mcp-server/skills/common-skills/artifact-style-guide
Command: npx skills add https://github.com/Bainbridge-Growth/drivepoint-plugins --skill artifact-style-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures consistency in the style and presentation of React artifacts across the Drivepoint platform, adhering to branding guidelines and improving user experience.

Core Features & Use Cases

  • Brand Consistency: Defines visual rules for the Drivepoint brand, including logo and color usage.
  • Component Usage: Outlines guidelines for using React components in artifact development.
  • Technical Standards: Provides recommendations for data handling, typography, and number formatting.
  • Use Case: When building a new React component for a dashboard, this Skill helps ensure it aligns with the Drivepoint style guide.

Quick Start

Apply the Artifact Style Guide to your React components to maintain brand consistency and usability.

Frequently Asked Questions about Artifact Style Guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain brand consistency when building React components for a dashboard?▼

Standardizing React components for brand consistency involves applying predefined visual rules for logo and color usage. This style guide ensures your dashboard artifacts align with established branding guidelines and technical standards, improving user experience.

What is a React style guide and when do I need it for UI/UX development?▼

A React style guide is a set of visual and technical standards for component development. You need it when creating visual artifacts to ensure consistent branding, proper data handling, and standardized typography across the platform ecosystem.

Does this style guide cover technical standards for data handling and number formatting in React?▼

Yes, this style guide provides technical recommendations for data handling, typography, and number formatting. It ensures developers adhere to specific visual and technical standards when presenting data within React artifacts.

How do I standardize visual design across multiple React artifacts?▼

You can standardize visual design by applying a comprehensive style guide to your React components. This enforces consistent brand identity, UI rules, and data presentation standards across all artifacts within the ecosystem.

Can I use my own React components or do I need to follow specific UI/UX guidelines?▼

While you build the React components, you must follow established UI/UX guidelines to ensure brand consistency. The style guide outlines specific rules for component usage, visual design, and technical implementation to maintain platform standards.

What are the limitations of using a standardized style guide for React branding?▼

A standardized style guide focuses strictly on adhering to predefined visual and technical standards for the ecosystem. It may limit creative flexibility in component design to ensure strict brand consistency and usability across the platform.

Related Skills

Explore More Design & Creative Skills→
tyk-labtyk-lab

using-git-worktrees

Create an isolated git worktree for feature development with safety checks.

Community
Advanced
Tyler-R-KendrickTyler-R-Kendrick
1

dashboard-openui-parity

Synchronize compiled React dashboard pages with interpreted OpenUI Lang programs.

Community
Advanced
Devvraj10Devvraj10

artifacts

Create mockups, data visualizations, and mobile apps with React and React Native.

Community
Advanced
ovachieverovachiever
52

ui-design-system

Generate design tokens from brand colors in JSON, CSS, or SCSS.

Community
Advanced