Raffa Ds

C 67 completed
Cli Tool
web_app / json · tiny
37
Files
6,449
LOC
3
Frameworks
7
Languages

Pipeline State

completed
Run ID
#370341
Phase
done
Progress
1%
Started
Finished
2026-04-13 01:31:02
LLM tokens
0

Pipeline Metadata

Stage
Cataloged
Decision
proceed
Novelty
69.34
Framework unique
Isolation
Last stage change
2026-05-10 03:35:17
Deduplication group #51467
Member of a group with 2 similar repo(s) — canonical #25080 view group →
Top concepts (2)
Project DescriptionWeb Frontend
Repobility · code-quality intelligence platform · https://repobility.com

AI Prompt

Create a template for building and maintaining a design system component library. I need it to support generating components directly from Figma designs using commands like `/new-component <figma-url>` and `/update-component <figma-url>`. The setup should include Storybook for documentation, and it should automatically publish the package to GitHub Packages on push. Please ensure the design tokens are managed in `src/tokens/tokens.css` and the components are stored in `src/components/`.
react design-system figma storybook vite typescript component-library web-app
Generated by gemma4:latest

Catalog Information

A template that automates the creation and maintenance of design system component libraries, enabling developers to generate components directly from Figma designs.

Description

This template provides a ready‑to‑use foundation for building a design system component library. It includes a command‑line interface that can pull component specifications from a Figma URL and generate fully typed React components with associated design tokens. Design tokens are stored in a central CSS file, while components live in a dedicated source folder. Storybook is configured to automatically build and deploy a visual catalog whenever changes are pushed, and the package is published to a registry on each release. The setup encourages consistency, rapid iteration, and seamless integration into continuous‑integration workflows.

الوصف

يُقدّم هذا القالب أساسًا جاهزًا لبناء مكتبة مكونات نظام التصميم. يتضمن واجهة سطر أوامر يمكنها سحب مواصفات المكونات من رابط Figma وتوليد مكونات React مكتوبة بالأنواع مع رموز التصميم المرتبطة. تُخزن رموز التصميم في ملف CSS مركزي، بينما تُحفظ المكونات في مجلد مصدر مخصص. تم إعداد Storybook ليبني ويُنشر تلقائيًا كتالوج بصري عند كل دفع، كما يُنشر الحزمة إلى سجل الحزم عند كل إصدار. يروج الإعداد للاتساق، والتكرار السريع، والتكامل السلس مع سير عمل التكامل المستمر.

Novelty

6/10

Tags

design-system component-library figma-integration design-tokens component-automation ui-library component-generation

Technologies

playwright react storybook vite vitest

Claude Models

claude-opus-4.6

Quality Score

C
67.1/100
Structure
54
Code Quality
100
Documentation
47
Testing
15
Practices
80
Security
100
Dependencies
60

Strengths

  • CI/CD pipeline configured (github_actions)
  • Code linting configured (eslint)
  • Low average code complexity \u2014 well-structured code
  • Good security practices \u2014 no major issues detected

Weaknesses

  • No LICENSE file \u2014 legal ambiguity for contributors
  • No tests found \u2014 high risk of regressions

Recommendations

  • Add a test suite \u2014 start with critical path integration tests
  • Add a LICENSE file (MIT recommended for open source)

Security & Health

4.3h
Tech Debt (B)
A
OWASP (100%)
PASS
Quality Gate
A
Risk (2)
Repobility (the analyzer behind this table) · https://repobility.com
Unknown
License
0.0%
Duplication
Full Security Report AI Fix Prompts SARIF SBOM

Languages

json
90.6%
typescript
4.1%
markdown
3.3%
yaml
0.9%
css
0.5%
javascript
0.3%
html
0.2%

Frameworks

React Vitest Vite

Concepts (2)

Findings produced by Repobility · scan your repo at https://repobility.com/scan/
CategoryNameDescriptionConfidence
All rows above produced by Repobility · https://repobility.com
auto_descriptionProject DescriptionA ready-to-use template for creating design system component libraries.80%
auto_categoryWeb Frontendweb-frontend70%

Quality Timeline

1 quality score recorded.

View File Metrics

Embed Badge

Add to your README:

![Quality](https://repos.aljefra.com/badge/94546.svg)
Quality BadgeSecurity Badge
Export Quality CSVDownload SBOMExport Findings CSV