feat: add skill creation workflow

This commit is contained in:
Marcos Paulo
2026-09-02 02:23:29 +00:00
parent 0a802004af
commit 6c591eac07
5 changed files with 53 additions and 6 deletions
+11 -2
View File
@@ -36,6 +36,14 @@ button{font-family:inherit}
.worker-card:focus-visible,.tree-node:focus-visible,.route-table button:focus-visible,.skill-package button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
/* Skill shelf */
.skill-builder{margin-bottom:150px;padding-top:80px;border-top:1px solid var(--line)}
.builder-intro{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:end;margin:45px 0}.builder-intro h2{margin-bottom:0}.builder-intro>p{max-width:620px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.builder-workbench{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(380px,1.35fr) minmax(270px,.85fr);min-height:570px;border:1px solid var(--line);background:var(--line)}
.builder-steps{display:grid;grid-template-rows:repeat(5,1fr);gap:1px;background:var(--line)}.builder-steps button{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;align-content:center;column-gap:13px;padding:18px;border:0;color:var(--ink);background:var(--paper);text-align:left;cursor:pointer}.builder-steps button b{grid-row:1/-1;align-self:center;color:var(--accent);font:500 11px 'DM Mono',monospace}.builder-steps button span{font:700 12px 'DM Mono',monospace}.builder-steps button small{margin-top:5px;color:var(--muted);font-size:10px}.builder-steps button:hover{background:#eceff0}.builder-steps button.active{color:var(--paper);background:var(--blue);box-shadow:inset 5px 0 0 var(--gold)}.builder-steps button.active b,.builder-steps button.active small{color:var(--gold)}
.builder-detail{display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start;padding:38px clamp(28px,4vw,58px);color:var(--paper);background:var(--deep)}.builder-detail header{display:flex;justify-content:space-between;align-items:center}.builder-detail header span{color:#ffffff30;font:500 54px 'DM Mono',monospace}.builder-detail header small,.builder-action span,.builder-detail footer span{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.1em}.builder-detail h3{margin:27px 0 14px;font-size:clamp(26px,3vw,44px);line-height:1.05;letter-spacing:-.05em}.builder-detail blockquote{margin:0;padding:0;color:#a9bcc8;font:italic 20px/1.35 Georgia,serif}.builder-action{align-self:center;margin:34px 0}.builder-action p{margin:11px 0 0;color:#d5dde2;font-size:13px;line-height:1.7}.builder-detail footer{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#ffffff2b}.builder-detail footer>div{display:grid;gap:10px;padding:17px;background:#18364a}.builder-detail footer strong{font-size:11px;line-height:1.5}
.builder-artifact{display:grid;grid-template-rows:auto 1fr auto;color:var(--paper);background:#0b1b27}.artifact-head{display:flex;justify-content:space-between;padding:17px;border-bottom:1px solid #344c5d;font:500 8px 'DM Mono',monospace;letter-spacing:.09em}.artifact-head i{width:8px;height:8px;border-radius:50%;background:#80c69a;box-shadow:0 0 0 4px #80c69a20}.builder-artifact pre{display:grid;align-items:center;margin:0;padding:28px;overflow:auto;color:#bed0dc;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:22px 22px}.builder-artifact pre code{font:12px/1.9 'DM Mono',monospace}.artifact-command{display:grid;gap:9px;padding:18px;border-top:1px solid #344c5d}.artifact-command span{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.09em}.artifact-command code{font:10px 'DM Mono',monospace}
.builder-loop{display:grid;grid-template-columns:200px 1fr;gap:25px;padding:23px 28px;color:var(--ink);background:var(--gold)}.builder-loop>span{font:700 9px 'DM Mono',monospace;letter-spacing:.09em}.builder-loop>div{font:600 11px 'DM Mono',monospace}.builder-loop i{margin:0 12px;color:var(--accent);font-style:normal}.builder-steps button:focus-visible{position:relative;z-index:2;outline:3px solid var(--gold);outline-offset:-3px}
.skill-catalog{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}
.catalog-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.catalog-intro h2{margin-bottom:0}.catalog-intro>p{max-width:620px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.skill-deck{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.7fr);min-height:620px;border:1px solid var(--line);background:var(--line)}
@@ -46,7 +54,8 @@ button{font-family:inherit}
.skill-loadout{display:grid;grid-template-columns:210px 1fr;gap:25px;padding:24px 28px;color:var(--paper);background:var(--ink)}.skill-loadout>span{color:var(--gold);font:500 9px 'DM Mono',monospace;letter-spacing:.09em}.skill-loadout>div{font:500 11px 'DM Mono',monospace}.skill-loadout b{color:var(--accent);font-size:9px}.skill-loadout i{margin:0 10px;color:var(--gold);font-style:normal}.skill-index button:focus-visible{position:relative;z-index:2;outline:3px solid var(--gold);outline-offset:-3px}
@media(min-width:1600px){.tree-stage{height:390px}.tree-stage svg{height:330px;top:30px}.tree-node.root{top:45px}.tree-node.branch{top:255px}.tree-node{width:190px;padding:17px}.tree-detail{grid-template-columns:.6fr .8fr 1.8fr}.worker-card{min-height:210px;padding:28px}}
@media(min-width:2200px){main{max-width:2880px;padding-inline:clamp(140px,7vw,280px)}.hero{max-width:1420px}.hero h1{font-size:clamp(150px,7vw,220px)}.tree-stage{height:460px}.tree-stage svg{height:380px;top:45px}.tree-node.root{top:65px}.tree-node.branch{top:305px}.tree-node{width:240px;padding:22px}.tree-node strong{font-size:15px}.tree-detail>*{font-size:14px!important}.fleet,.failure-map{margin-bottom:170px}.workflow,.routing,.skills{margin-bottom:180px}}
@media(max-width:1100px){.chapter-links{display:none}.builder-workbench{grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr)}.builder-artifact{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:auto}.builder-artifact .artifact-head{grid-column:1/-1}.artifact-command{align-content:center;border-top:0;border-left:1px solid #344c5d}}
@media(max-width:1050px){.tree-node{width:145px}.tree-detail{grid-template-columns:1fr 1fr}.tree-detail p{grid-column:1/-1}.skill-explorer{grid-template-columns:1fr}}
@media(max-width:800px){.worker-detail{grid-template-columns:1fr}.worktrees{display:block}.worktree-intro{margin-bottom:40px}.tree-lab{box-shadow:9px 9px 0 #081621}.route-table button{min-width:620px}.skill-explorer{grid-template-columns:1fr 1fr}.catalog-intro{grid-template-columns:1fr;gap:20px}.skill-deck{grid-template-columns:1fr}.skill-index{grid-template-columns:1fr 1fr;grid-template-rows:none}.common-skill-detail{min-height:600px}.common-skill-notes{grid-template-columns:1fr 1fr}.common-skill-notes>div:first-child{grid-column:1/-1}}
@media(max-width:600px){.tree-stage{height:auto;min-height:560px;padding:24px}.tree-stage svg{display:none}.tree-node,.tree-node.root,.tree-node.branch,.tree-node.ui,.tree-node.tests,.tree-node.docs{position:relative;top:auto;right:auto;left:auto;width:100%;margin:0 0 34px;transform:none}.tree-node:not(:last-child)::after{content:'↓';position:absolute;left:50%;bottom:-28px;color:var(--gold)}.tree-node:hover,.tree-node.active,.tree-node.root:hover,.tree-node.root.active,.tree-node.tests:hover,.tree-node.tests.active{transform:translateY(-2px)}.tree-detail{grid-template-columns:1fr}.tree-detail p,.tree-detail code{grid-column:auto}.skill-explorer{grid-template-columns:1fr}.route-detail{grid-template-columns:70px 1fr}.route-meter{width:56px;height:70px}.skill-index{grid-template-columns:1fr}.skill-index button{min-height:78px}.common-skill-detail{min-height:0;padding:30px 24px}.common-skill-notes{grid-template-columns:1fr}.common-skill-notes>div:first-child{grid-column:auto}.skill-loadout{grid-template-columns:1fr}.skill-loadout>div{line-height:2}.skill-loadout i{margin-inline:4px}}
@media(max-width:800px){.worker-detail{grid-template-columns:1fr}.worktrees{display:block}.worktree-intro{margin-bottom:40px}.tree-lab{box-shadow:9px 9px 0 #081621}.route-table button{min-width:620px}.skill-explorer{grid-template-columns:1fr 1fr}.builder-intro,.catalog-intro{grid-template-columns:1fr;gap:20px}.builder-workbench{grid-template-columns:1fr}.builder-steps{grid-template-columns:1fr 1fr;grid-template-rows:none}.builder-artifact{grid-column:auto}.skill-deck{grid-template-columns:1fr}.skill-index{grid-template-columns:1fr 1fr;grid-template-rows:none}.common-skill-detail{min-height:600px}.common-skill-notes{grid-template-columns:1fr 1fr}.common-skill-notes>div:first-child{grid-column:1/-1}}
@media(max-width:600px){.tree-stage{height:auto;min-height:560px;padding:24px}.tree-stage svg{display:none}.tree-node,.tree-node.root,.tree-node.branch,.tree-node.ui,.tree-node.tests,.tree-node.docs{position:relative;top:auto;right:auto;left:auto;width:100%;margin:0 0 34px;transform:none}.tree-node:not(:last-child)::after{content:'↓';position:absolute;left:50%;bottom:-28px;color:var(--gold)}.tree-node:hover,.tree-node.active,.tree-node.root:hover,.tree-node.root.active,.tree-node.tests:hover,.tree-node.tests.active{transform:translateY(-2px)}.tree-detail{grid-template-columns:1fr}.tree-detail p,.tree-detail code{grid-column:auto}.skill-explorer{grid-template-columns:1fr}.route-detail{grid-template-columns:70px 1fr}.route-meter{width:56px;height:70px}.builder-steps{grid-template-columns:1fr}.builder-steps button{min-height:78px}.builder-detail{padding:28px 24px}.builder-detail footer{grid-template-columns:1fr}.builder-artifact{grid-template-columns:1fr}.builder-artifact .artifact-head{grid-column:auto}.artifact-command{border-left:0;border-top:1px solid #344c5d}.builder-loop{grid-template-columns:1fr}.builder-loop>div{line-height:2}.builder-loop i{margin-inline:4px}.skill-index{grid-template-columns:1fr}.skill-index button{min-height:78px}.common-skill-detail{min-height:0;padding:30px 24px}.common-skill-notes{grid-template-columns:1fr}.common-skill-notes>div:first-child{grid-column:auto}.skill-loadout{grid-template-columns:1fr}.skill-loadout>div{line-height:2}.skill-loadout i{margin-inline:4px}}
@media(prefers-reduced-motion:reduce){.worker-card,.tree-node,.route-meter span{transition:none}.reading-progress span{transition:none}}