G4OS-DS 系统

站点电子文档ação: https://gestao-quatro-ponto-zero.github.io/G4OS-DS/ 互联网档案馆的存檔,存档日期2013-12-12 • 妇女 无 : @g4ai/ds

设计系统 等离子体 G4 OS ——CRM,ATS,ERP,Franchiro,IA,门户网站 do cliente,produto SaaS ——相机语言视觉:

• 键 (原始内容存档于2013-10-12). emtários, com 特玛·埃斯库罗 电子 马尔卡斯德客户端e (原始内容存档于2018-10-25). trocando só variáveis.
• 构成部分:回放19 (compatível com 18.2+) + Base UI + Tailwind v4,em português, acessíveis, responsivos. Gráficos em SVG sem dependência. 中国植物物种信息数据库.
• 布洛克斯语Name: 85+ telas confletas (dashboards, 管道, registros, listas, IA, 登录, configurações) para copiar e trocar os dados.
• Feito 准代理人:服务员MCP, llms.txt时 ai/ 克洛德密码.

安装

Requisitos: 反应出18.2+ou 19, Tailwind CSS 4, Node 20+ ()反应 18) (中文(简体) ).

pnpm add @g4ai/ds @base-ui/react lucide-react        # ou npm i / yarn add
pnpm add -D tailwindcss @tailwindcss/postcss         # Vite: @tailwindcss/vite
npx g4os-ds doctor                                    # confere React, Tailwind, CSS, tema e fonte
npx g4os-ds init                                      # auditoria contínua: config, scripts ds:*, CI (ver "Qualidade")

/* app/globals.css (Next) ou src/index.css (Vite) */
@import "tailwindcss";
@import "@g4ai/ds/styles.css";   /* tokens, temas, componentes; já traz os @source do DS */

O pacote publica JavaScript compilado (ESM com) (英语) "use client"{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}E tipos, junto com o CSS e o código-fonte que o Tailwindle lê. {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我需要你帮助 诺·普里西萨德 transpilePackages nem 外加插件 .

Next.js (App路由器) (英语)

// app/layout.tsx
import { themeScript } from "@g4ai/ds";
import { DsSetup } from "@/lib/ds";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR" className="ds-app" data-theme="system" suppressHydrationWarning>
      <head><script dangerouslySetInnerHTML={{ __html: themeScript }} /></head>
      <body><DsSetup />{children}</body>
    </html>
  );
}

// lib/ds.tsx — registra o Link do Next nos componentes com href
"use client";
import Link from "next/link";
import { setLinkComponent } from "@g4ai/ds";
setLinkComponent(Link);
export function DsSetup() { return null; }

启动压缩器 : templates/next-app - 圭亚那: 文档/guas/下册。 。 。 .

维特

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { themeScript } from "@g4ai/ds/lib/theme";

// Aplica o tema salvo antes da primeira pintura (sem piscar).
const dsTheme = { name: "ds-theme", transformIndexHtml: () => [{ tag: "script", children: themeScript, injectTo: "head-prepend" as const }] };

export default defineConfig({ plugins: [react(), tailwindcss(), dsTheme] });

<!-- index.html -->
<html lang="pt-BR" class="ds-app" data-theme="system">

贵亚: 文件/guias/vite.md。 。 。 .

用户

import { AppShell, Sidebar, Page, PageHeading, KpiGrid, KpiCard, ChartCard, AreaChart, formatCurrency } from "@g4ai/ds";

帕雷·来萨·马·德多拉(Para começar uma tela, compie o groupo mais parecido de) node_modules/@g4ai/ds/src/blocks/ (你做现场,aba) 科迪戈语Name{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}那就叫爸爸们.

Tema, 暗模式 e marca

<html data-theme="dark">                <!-- light | dark | system; ThemeToggle/useTheme trocam e salvam -->
<html data-brand="g4os">    <!-- presets de marca; ou o seu [data-brand="acme"] com --ds-primary… -->
<html data-type="editorial">            <!-- presets de tipografia -->

Marca de cliente com contexte AA (claro e escuro):技能 技术 ds-themeferramenta MCP (英语) theme_from_colors 尔 文件/基金/temas-e-dark-mode.md。 。 。 .

Usar 连锁店 IA

MCP 磁共振 (Claude Code, Codex, Cursor, VS Code, 双子座CLI, Zed, Windsurf, pi, qulquer clientee MCP). Roda local, lê an versão instalada do DS, sem rede: 互联网档案馆的存檔,存档日期2013-12-02., p

claude mcp add g4os-ds -- npx -y @g4ai/ds mcp     # Claude Code
codex mcp add g4os-ds -- npx -y @g4ai/ds mcp      # Codex

// Cursor, Claude Desktop, Windsurf, Gemini CLI… · VS Code (.vscode/mcp.json) usa "servers" no lugar de "mcpServers"
{ "mcpServers": { "g4os-ds": { "command": "npx", "args": ["-y", "@g4ai/ds", "mcp"] } } }

Config de cada 客户端, Windows, modo HTTP (npx -y @g4ai/ds mcp --httpe 问题: 文件/吉亚斯/mcp.md。 。 。 .

费拉门塔斯: search, (中文(简体) ), get_component, (中文(简体) ), list_blocks, (中文(简体) ), get_block, (中文(简体) ), get_guide, (中文(简体) ), get_tokens, (中文(简体) ), theme_from_colors, (中文(简体) ), audit, (中文(简体) ), doctor。提示: criar-tela, (中文(简体) ), revisar-tela, (中文(简体) ), adaptar-projeto。 。 。 .

网页 (段落代理 que só leem URLs):

• https://gestao-quatro-ponto-zero.github.io/G4OS-DS/llms.txt 互联网档案馆的存檔,存档日期2013-12-02 ——í地
• https://gestao-quatro-ponto-zero.github.io/G4OS-DS/llms-full.txt (中文(简体) ) - 拖地纳姆·阿尔基沃
• …/ai/core.md, (中文(简体) ), …/ai/components/<módulo>.md, (中文(简体) ), …/ai/blocks/<slug>.md, (中文(简体) ), …/ai/manifest.json, (中文(简体) ), …/docs/…

没有直肠数字 : node_modules/@g4ai/ds/ai/core.md {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}一个港 科尔 templates/AGENTS.snippet.md 没有 AGENTS.md编号 :CLAUDE.md 做应用.

插件执行 Claude 代码 (技术) g4os-ds, (中文(简体) ), ds-create, (中文(简体) ), ds-migrate, (中文(简体) ), ds-review, (中文(简体) ), ds-theme:

/plugin marketplace add Gestao-Quatro-Ponto-Zero/G4OS-DS
/plugin install g4os-ds@g4os

Depois peça (英语) "Adapte este projeto ao G4OS-DS" (英语), (中文(简体) ), "请使用tela de pedidos com o 设计系统", (中文(简体) ), (原始内容存档于2018-10-21) (英语). Revise esta tela, (中文(简体) ), "Tema do cliente Acme, azul #0b5cff" (英语)贵亚: 文件/guas/usar-com-ia.md 没有网站: 吉亚斯·德·伊阿代理人。 。 。 .

资格:审计员,英特克

如DS(托肯斯、Tipografia、página Anatomia、comosição de parties、acessibilidade、格式化escrita pt-BR、进口、React) 等。 Um motor só, usado pelo CLI, pelo插件 ESLint, pelo CI e pela 工具 audit 做磁共振 吉娅·康普莱托: 文件/guias/auditoria.md。 。 。 .

npx g4os-ds init                      # g4os-ds.config.json + scripts ds:* + workflow de CI (--eslint, --hook lefthook, --baseline)
npx g4os-ds doctor                    # pré-requisitos: React 18.2+/19, Tailwind v4, ordem do CSS, tema, fonte, React duplicado
npx g4os-ds audit                     # o que foge do DS, com a troca sugerida
npx g4os-ds audit --fix               # aplica as trocas seguras (bg-white→bg-surface, rounded-[12px]→rounded-card…)
npx g4os-ds audit --changed           # só o que mudou (--staged no pre-commit, --since origin/main no PR)
npx g4os-ds audit --baseline          # projeto legado: só achado novo falha
npx g4os-ds audit --format sarif      # também: pretty, json, markdown, github (anotações no PR)
npx g4os-ds rules                     # lista as 47 regras

// eslint.config.mjs: as mesmas regras no editor e no `eslint .`
import g4osDs from "@g4ai/ds/eslint";
export default [/* …sua config */ g4osDs.configs.recommended];

退出代码 : 0 ok \fn微软雅黑okay \fn微软雅黑okay \fn方正黑体简体\fs18\b1\bord1\shad1\3ch2f2f2f}美国海军陆战队 1 阿查多斯克法尔姆 2 (原始内容存档于2018-09-21). woro de uso/ config. 行动: // g4os-ds-disable-next-line <regra> -- motivo。 。 。 .

(原始内容存档于2018-10-26) (中文(中国大陆) ). Regras de anatomia e comosção pegam o que deixa uma muma migrada "esquisita" mesmo com 0 错误:copo centralizado fora do eixo do título (中文)page-width-wrapper(botão desabilitado apagado por 包装纸)disabled-wrapper(原始内容存档于2017-09-29) (中文(简体) ). ). . field-double-label),可控结(raw-input, (中文(简体) ), Select por linha (英语:select-per-row), texto em inglês ou"com supesso!" (中文(简体) )english-copy, (中文(简体) ), copy-tone) (中文(简体) ). (原始内容存档于2018-10-21) (英语). Para medir se agentes de IA acertam com essas instruel'es, há um eval em scripts/eval/ (单位:千美元)旧相机 IA) (中文(简体) ).

国 际

npx g4os-ds init                      # prepara o projeto (config, scripts, CI)
npx g4os-ds doctor                    # o projeto pode usar o DS?
npx g4os-ds audit [pastas]            # auditoria (--fix, --format, --changed, --baseline)
npx g4os-ds rules                     # regras, categorias e gravidades
npx g4os-ds guide                     # imprime o caminho do guia ai/core.md
npx g4os-ds mcp                       # servidor MCP (stdio; --http para Streamable HTTP)

阿图利扎尔·德·万索

pnpm up @g4ai/ds                      # ou npm i @g4ai/ds@latest
npx g4os-ds audit --fix               # troca nomes renomeados e o que for seguro; aponta regras novas

莱亚 变化 (原始内容存档于2018-06-26) (英语). Couring a sua versão e a nova: cada entrada diz o que o app precisa fazer. 雷诺梅亚斯相机 ai/renames.json; 相机插件, peça "承认o@g4ai/ds e ajusteo o código" (技能) ds-migrate(原始内容存档于2018-10-25). Modo atualização. 塞吉摩斯语Name 交换器: equanto estiversmos em (英语) 0.x泥地克克克克克克克克克克克克克克克克克克克克克 小声 e vem com"como偏头痛".

文件

构成部分

Todos 导出多 @g4ai/ds (你波多罗: @g4ai/ds/components/<arquivo>) (中文(简体) ).

Exemplos vivos, regres e道具 : 站点 尔 ai/components/<arquivo>.md。列表a src/index.ts。 。 。 .

布洛克斯语Name

阿尔基沃斯 src/blocks/ (também no pacote: m: node_modules/@g4ai/ds/src/blocks/) (中文(简体) ). 卡达集团 @g4ai/dsfunciona de 320 a 1440 px e explica o (英语) 猜谜游戏 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}哦! {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}哦 ai/blocks/<slug>.md。 。 。 .

Catálogo completo com objetivo de cada um: Catálogo completo com com objetivo de cada um: Catálogo completo com com com com objetivo de cada um: Catálogo com com com com com com com com objetivo de cada : ada: Catálogo : o: o: Ctálogo 取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 ai/llms.txt (韩语) 尔 list_blocks 没有MCP。 精准集团 usar por tipo de app: 一般事务人员(其他职等)。 。 。 .

阴影/ ii e 第21次dev

(原始内容存档于2018-09-26) (英语). Para o que o DS não tem, traga do shadcn/ui do 21st.dev e strime @g4ai/ds/shadcn.css: 瓦里亚维斯在用"花"来表示代号 科利索斯语bg-accent, (中文(简体) ), bg-mutede 核对表: 文件/调查表/影印本。 。 。 .

联系人

git clone https://github.com/Gestao-Quatro-Ponto-Zero/G4OS-DS.git && cd G4OS-DS
npm ci
npm run showcase:watch                # site local em showcase/dist
npm run check                         # tokens + tipos + lint + ai/ em dia + auditoria + testes (critério de pronto)
npx changeset                         # descreve a mudança: patch, minor ou major

科莫·赛·马·韦相: o PR com 改变 entra na main o GitHub 活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口活口 "范克兰克"(德語:Versão de lançamento),又译"兰克兰克" ao mesclar esse PR, o pacote é publicado nonpm automament (信任出版,com出处). 宁古埃姆·罗达 npm publish à. {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}哦 共和党 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}一个卡达推拿 main。 。 。 .

豪华相接: 捐款额 • 反 " técnicos " (构件、集团、página do site): 页:1。 。 。 .

马帕确实重新保有

src/           styles/ (tokens, temas, componentes, shadcn.css) · tokens/ · lib/ · components/ · blocks/ · index.ts
showcase/      site de documentação (main.tsx, kit.tsx, pages/*.tsx, build.mjs → também gera llms.txt)
docs/          fundamentos · padroes · receitas · guias
ai/            gerado: core.md · tokens.md · components/*.md · blocks/*.md · manifest.json · llms.txt · renames.json
scripts/       cli.mjs (g4os-ds audit | doctor | init | rules | guide | mcp) · lint/ (regras, motor, formatos, plugin ESLint) · mcp.mjs · build-ai-docs.mjs
plugin/        plugin do Claude Code (skills) · .claude-plugin/marketplace.json
templates/     next-app (starter) · AGENTS.snippet.md
AGENTS.md      regras obrigatórias e qual bloco usar · CHANGELOG.md  o que mudou e o que o app precisa fazer

语法

科迪戈・索布 麻省理工. Os nomes e marcas "G4","G4 OS" e "G4 Educação" não são cobertos pela licença: ao usar o DS em outro produto, trouque a marca (英语:ProductMark(原始内容存档于2013-10-12). nome do produto. pela sua.