Skip to content

Commit 556679d

Browse files
HustleCodingHustleCoding
authored
Merge pull request #10 from HustleCoding/cursor/pstack-explained-landing-68da
Make pstack-explained easier to learn and use
2 parents 7d4b210 + 3eb0ca5 commit 556679d

11 files changed

Lines changed: 2036 additions & 729 deletions

File tree

‎.github/scripts/extract-data.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@ const script = scriptMatch[1];
1717
const splitMarker = script.match(/\nconst\s+\$\s*=/)?.index;
1818
const dataCode = splitMarker ? script.slice(0, splitMarker) : script;
1919

20-
const code = `${dataCode.trim()}\nreturn {PLAYBOOKS, SKILLS, GROUPS, PRINCIPLES, MODELS, KEYWORDS, EXAMPLES, EXAMPLE_CHIPS};`;
20+
const code = `${dataCode.trim()}\nreturn {PLAYBOOKS, SKILLS, GROUPS, PRINCIPLES, MODELS, KEYWORDS, EXAMPLES, EXAMPLE_CHIPS, NOW, CHOICES, DRIFT};`;
2121
const fn = new Function(code);
2222
console.log(JSON.stringify(fn(), null, 2));

‎.github/scripts/generate.py‎

Lines changed: 162 additions & 85 deletions
Large diffs are not rendered by default.

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# pstack-explained
22

3-
An unofficial, interactive reading aid for **pstack**, [poteto's](https://x.com/poteto) set of engineering skills for coding agents.
3+
An unofficial, interactive reading aid for **pstack**, [poteto's](https://x.com/poteto) set of engineering skills for coding agents. Not affiliated with poteto, pstack, or Cursor.
44

5-
A pair of static HTML pages (`index.html` and `changelog.html`) that explain pstack's playbooks, skills, and principles, with a live playbook router and a standalone upstream changelog. No build step, no dependencies.
5+
Static HTML pages that explain what pstack is, how to start, and when each playbook and skill applies. Includes a live playbook router, grouped catalogs with copyable prompts, and a standalone upstream changelog. No build step, no dependencies.
66

77
## Live site
88

@@ -18,7 +18,7 @@ Open `index.html` or `changelog.html` in any browser, or run `python3 -m http.se
1818

1919
## Contents
2020

21-
`index.html` is the whole app. Markup, styles, data, and router logic live inline.
21+
`index.html` is the main app: a copyable "what do I type?" board, a which-one chooser, drift corrections, a page finder, the routing demo, and the playbook, skill, and principle catalogs. Markup, styles, data, and router logic live inline.
2222

2323
`.github/workflows/deploy.yml` is the GitHub Pages deployment workflow.
2424

‎agent-templates.html‎

Lines changed: 104 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -20,120 +20,111 @@
2020
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
2121
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
2222
<link rel="shortcut icon" href="favicon.ico">
23-
<meta name="theme-color" content="#ffffff">
24-
<link rel="preconnect" href="https://fonts.googleapis.com">
25-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
26-
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
23+
<meta name="theme-color" content="#f7f4ee">
2724
<style>
28-
:root{
29-
--bg:#ffffff; --ink:#1a1a1a; --soft:#3d3d3d; --dim:#6b6b6b; --faint:#9b9b9b;
30-
--rule:#ededed; --rule2:#e0e0e0;
31-
--accent:#b45309; --accent-soft:#fdf4ea; --accent-line:#e8c39a;
32-
--t-setup:#7c4d9e; --t-sdlc:#b45309; --t-orch:#b13a5a; --t-special:#1f6f8b;
33-
--maxw:880px; --navh:54px;
34-
--ff:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
35-
--ff-mono:"IBM Plex Mono",ui-monospace,monospace;
36-
}
37-
*{box-sizing:border-box}
38-
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
39-
body{
40-
margin:0; background:var(--bg); color:var(--ink);
41-
font-family:var(--ff); font-size:17px; line-height:1.65;
42-
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
43-
}
44-
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); position:relative}
45-
code{font-family:var(--ff-mono); font-size:.92em; color:var(--accent)}
46-
47-
header.mast{padding:clamp(56px,9vw,96px) 0 clamp(36px,5vw,52px)}
48-
.mark{display:flex; align-items:center; gap:13px; margin-bottom:22px}
49-
.glyph{width:26px; height:26px; position:relative; flex:none}
50-
.glyph i{position:absolute; left:0; height:20%; background:var(--accent); border-radius:1px}
51-
.glyph i:nth-child(1){bottom:0; width:100%; opacity:.4}
52-
.glyph i:nth-child(2){bottom:40%; width:68%; opacity:.65}
53-
.glyph i:nth-child(3){bottom:80%; width:40%}
54-
h1.wordmark{font-family:var(--ff); font-weight:700; font-size:clamp(36px,6vw,50px); letter-spacing:-.025em; margin:0; line-height:1}
55-
h1.wordmark span{color:var(--accent)}
56-
.count{font-family:var(--ff-mono); font-size:13px; color:var(--faint); margin:0 0 26px; letter-spacing:.02em}
57-
.tagline{font-size:clamp(19px,2.6vw,23px); line-height:1.45; color:var(--soft); max-width:52ch; margin:0 0 18px; font-weight:500; letter-spacing:-.005em}
58-
.tagline em{font-style:normal; color:var(--ink); border-bottom:2px solid var(--accent-line)}
59-
.intro-lead{color:var(--dim); font-size:16px; line-height:1.6; max-width:62ch; margin:0}
60-
61-
nav.bar{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
62-
nav.bar .wrap{display:flex; gap:2px; padding-top:7px; padding-bottom:7px; overflow-x:auto; scrollbar-width:none}
63-
nav.bar .wrap::-webkit-scrollbar{display:none}
64-
nav.bar a{color:var(--dim); text-decoration:none; font-size:14px; font-weight:500; white-space:nowrap; padding:8px 13px; border-radius:8px; transition:background .15s,color .15s}
65-
nav.bar a:hover,nav.bar a:focus-visible{background:var(--accent-soft); color:var(--accent); outline:none}
66-
nav.bar a[aria-current="page"]{background:var(--accent-soft); color:var(--accent)}
67-
68-
section{padding:clamp(52px,8vw,84px) 0; border-bottom:1px solid var(--rule); scroll-margin-top:var(--navh)}
69-
.sh{margin-bottom:clamp(26px,4vw,38px); max-width:64ch}
70-
.sh .num{color:var(--accent); font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em}
71-
.sh h2{font-weight:600; font-size:clamp(24px,3.6vw,31px); margin:7px 0 12px; letter-spacing:-.018em; line-height:1.15}
72-
.sh .lead{color:var(--dim); font-size:16px; line-height:1.6; margin:0; max-width:60ch}
73-
.sh .lead a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-line)}
74-
.sh .lead a:hover{border-bottom-color:var(--accent)}
75-
76-
.flow{margin:0 0 28px; font-size:15px; color:var(--dim); line-height:1.9}
77-
.flow .cmd-tok{font-family:var(--ff-mono); color:var(--accent); font-size:14px}
78-
.flow .arr{color:var(--faint); margin:0 2px}
79-
80-
.band{margin-bottom:clamp(34px,5vw,52px); animation:rise .5s both}
81-
.band:last-child{margin-bottom:0}
82-
.band-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
83-
.band-head .tick{width:9px; height:9px; border-radius:2px; flex:none}
84-
.band-head h3{font-weight:600; font-size:18px; margin:0; letter-spacing:-.01em}
85-
.band-head .ct{color:var(--faint); font-family:var(--ff-mono); font-size:12px}
86-
.band-head .ln{flex:1; height:1px; background:var(--rule)}
87-
.band-desc{color:var(--dim); font-size:14.5px; margin:0 0 16px; max-width:60ch}
88-
.bricks{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
89-
.brick{
90-
text-align:left; background:var(--bg); border:1px solid var(--rule); border-left:3px solid var(--c);
91-
color:var(--ink); padding:13px 15px; border-radius:3px 12px 12px 3px; cursor:pointer; font-family:var(--ff);
92-
transition:background .18s,transform .18s; animation:rise .5s both;
93-
}
94-
.brick:hover{background:#fafafa; transform:translateY(-1px)}
95-
.brick:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
96-
.brick .pn{font-weight:600; font-size:15px; line-height:1.25}
97-
.brick .pa{color:var(--faint); font-size:12.5px; margin-top:6px; line-height:1.45}
98-
.tmpl-note{color:var(--faint); font-size:13.5px; margin-top:20px; max-width:60ch; line-height:1.6}
99-
.tmpl-note a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-line)}
100-
.tmpl-note a:hover{border-bottom-color:var(--accent)}
101-
102-
footer{padding:clamp(40px,6vw,60px) 0 calc(40px + env(safe-area-inset-bottom)); color:var(--faint); font-size:14px; line-height:1.7}
103-
footer p{margin:0 0 8px; max-width:62ch}
104-
footer a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-line)}
105-
footer a:hover{border-bottom-color:var(--accent)}
106-
107-
.overlay{position:fixed; inset:0; background:rgba(20,20,20,.45); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:60; padding:clamp(16px,4vw,24px)}
108-
.overlay.open{display:flex; animation:fade .2s}
109-
.dialog{background:var(--bg); border:1px solid var(--rule2); border-radius:14px; max-width:540px; width:100%; padding:clamp(24px,4vw,32px); position:relative; animation:rise .26s both; max-height:86vh; overflow:auto; box-shadow:0 16px 48px -16px rgba(0,0,0,.22)}
110-
.dialog .cat{font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent)}
111-
.dialog h3{font-weight:600; font-size:clamp(22px,3.5vw,27px); margin:8px 0 18px; line-height:1.15; letter-spacing:-.015em}
112-
.dialog .field{margin:15px 0}
113-
.dialog .field .k{color:var(--faint); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px; font-family:var(--ff-mono)}
114-
.dialog .field .v{color:var(--ink); font-size:15.5px; line-height:1.6}
115-
.dialog .close{position:absolute; top:13px; right:13px; background:var(--bg); border:1px solid var(--rule2); color:var(--dim); width:34px; height:34px; border-radius:9px; cursor:pointer; font-family:var(--ff); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center}
116-
.dialog .close:hover{color:var(--accent); border-color:var(--accent-line)}
117-
118-
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
119-
@keyframes fade{from{opacity:0} to{opacity:1}}
120-
@media (prefers-reduced-motion:reduce){
121-
*{animation:none !important; transition:none !important}
122-
html{scroll-behavior:auto}
123-
}
124-
@media (max-width:640px){
125-
.bricks{grid-template-columns:1fr}
126-
.flow{line-height:2}
127-
}
25+
@font-face{
26+
font-family:"IBM VGA";
27+
src:url("fonts/WebPlus_IBM_VGA_8x16.woff") format("woff");
28+
font-weight:400; font-style:normal; font-display:swap;
29+
}
30+
:root{
31+
--bg:#e6e1d6; --paper:#f7f4ee; --ink:#1c1915; --soft:#3d3832; --dim:#6a635a; --faint:#8d867c;
32+
--line:#e0d9cc; --mark:#7f2d22;
33+
--t-setup:#7f2d22; --t-sdlc:#3d3832; --t-orch:#7f2d22; --t-special:#3d3832;
34+
--maxw:760px; --navh:0px;
35+
--ff:"IBM VGA", ui-monospace, monospace;
36+
--ff-mono:"IBM VGA", ui-monospace, monospace;
37+
}
38+
*{box-sizing:border-box}
39+
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
40+
body{
41+
margin:0; background:var(--paper); color:var(--ink); font-family:var(--ff);
42+
font-size:16px; line-height:24px; font-weight:400; letter-spacing:0; font-synthesis:none;
43+
-webkit-font-smoothing:none; font-smooth:never;
44+
}
45+
button,input,textarea,select{font-family:inherit; font-weight:400; letter-spacing:0; font-synthesis:none; appearance:none; -webkit-appearance:none}
46+
button:focus,button:focus-visible{outline:none}
47+
h1,h2,h3{font-family:var(--ff); font-weight:400; letter-spacing:0; line-height:40px}
48+
code{font-family:var(--ff-mono); font-size:16px}
49+
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
50+
.sheet{max-width:860px; margin:28px auto; background:var(--paper); border:1px solid #d4ccbe; min-height:calc(100vh - 56px); padding-bottom:28px}
51+
.unofficial{padding:18px 0 0; color:var(--dim); font-size:16px}
52+
.unofficial .wrap{display:flex; gap:10px; flex-wrap:wrap; align-items:baseline}
53+
.unofficial strong{font-weight:400; color:var(--ink); font-size:16px}
54+
.unofficial span{color:var(--dim)}
55+
.unofficial a{color:var(--mark); font-size:16px}
56+
header.mast{padding:28px 0 8px}
57+
h1.wordmark{font-size:32px; margin:0 0 12px; line-height:40px}
58+
h1.wordmark span{color:var(--ink)}
59+
.count{font-family:var(--ff-mono); font-size:16px; color:var(--faint); margin:0 0 12px}
60+
.tagline{font-size:16px; color:var(--soft); margin:0 0 10px; max-width:62ch; line-height:24px}
61+
.intro-lead{color:var(--dim); font-size:16px; margin:0}
62+
nav.bar{position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--line); z-index:2}
63+
nav.bar .wrap{display:flex; gap:14px; flex-wrap:wrap; padding-top:10px; padding-bottom:10px}
64+
nav.bar a{color:var(--dim); text-decoration:none; font-size:16px}
65+
nav.bar a:hover,nav.bar a[aria-current="page"]{color:var(--mark)}
66+
section{padding:28px 0; border-bottom:1px solid var(--line)}
67+
.sh h2{font-size:32px; margin:0 0 8px; line-height:40px}
68+
.sh .num{display:none}
69+
.sh .lead{color:var(--dim); margin:0; font-size:16px; line-height:24px}
70+
.flow{color:var(--dim); font-size:16px}
71+
.flow .cmd-tok{font-family:var(--ff-mono); color:var(--mark); font-size:16px}
72+
.band{margin:22px 0}
73+
.band-head{display:flex; gap:10px; align-items:baseline}
74+
.band-head h3{font-family:var(--ff); font-size:16px; font-weight:400; letter-spacing:0; line-height:24px; text-transform:uppercase; color:var(--dim); margin:0}
75+
.band-head .ct{color:var(--faint); font-size:16px}
76+
.band-head .ln,.band-head .tick{display:none}
77+
.band-desc{color:var(--dim); font-size:16px; margin:4px 0 0}
78+
.bricks{display:block}
79+
.brick{
80+
display:block; width:100%; text-align:left; background:transparent; color:var(--ink);
81+
border:0; border-top:1px solid var(--line); border-left:0; border-radius:0; padding:12px 0; cursor:pointer; font-family:var(--ff);
82+
}
83+
.brick:hover{background:transparent}
84+
.brick .pn{font-family:var(--ff); font-size:16px; font-weight:400; line-height:24px}
85+
.brick .pa{color:var(--dim); font-size:16px; margin-top:3px}
86+
.tmpl-note{color:var(--dim); font-size:16px}
87+
.tmpl-note a{color:var(--mark)}
88+
.changelog-meta{color:var(--dim); font-size:16px}
89+
.changelog-meta a{color:var(--mark)}
90+
.changelog-entry{display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--line)}
91+
.changelog-entry:last-child{border-bottom:0}
92+
.changelog-date{width:160px; flex:none; font-family:var(--ff-mono); font-size:16px; color:var(--faint); text-align:right}
93+
.changelog-title{font-size:16px; line-height:24px}
94+
.changelog-title a{color:var(--ink); text-decoration:none}
95+
.changelog-title a:hover{color:var(--mark)}
96+
.changelog-meta .ch-sha,.changelog-meta .ch-time{font-family:var(--ff-mono); font-size:16px; color:var(--faint)}
97+
footer{padding:20px 0 8px; color:var(--dim); font-size:16px; line-height:24px}
98+
footer a{color:var(--mark)}
99+
.overlay{position:fixed; inset:0; background:rgba(28,25,21,.28); display:none; align-items:center; justify-content:center; z-index:60; padding:24px}
100+
.overlay.open{display:flex}
101+
.dialog{background:var(--paper); border:1px solid #d4ccbe; border-radius:0; max-width:560px; width:100%; padding:28px; position:relative; max-height:86vh; overflow:auto}
102+
.dialog .cat{font-family:var(--ff-mono); font-size:16px; letter-spacing:0; text-transform:uppercase; color:var(--faint)}
103+
.dialog h3{font-size:32px; line-height:40px; margin:8px 0 12px}
104+
.dialog .field .k{font-family:var(--ff-mono); font-size:16px; letter-spacing:0; text-transform:uppercase; color:var(--faint)}
105+
.dialog .close{position:absolute; top:16px; right:16px; background:none; border:0; color:var(--dim); cursor:pointer; font-family:var(--ff); font-size:16px; text-decoration:underline; text-underline-offset:3px}
106+
@media (max-width:640px){
107+
.sheet{margin:0; border:0}
108+
h1.wordmark{font-size:32px}
109+
.changelog-entry{flex-direction:column; gap:4px}
110+
.changelog-date{text-align:left; width:auto}
111+
}
128112
</style>
129113
</head>
130114
<body>
131115

116+
<div class="unofficial">
117+
<div class="wrap">
118+
<strong>Unofficial companion.</strong>
119+
<span>Not part of pstack. Documents lionbenjamin/agent-templates as a related toolkit.</span>
120+
<a href="index.html">Back to pstack explained</a>
121+
</div>
122+
</div>
123+
132124
<header class="mast">
133125
<div class="wrap">
134126
<div class="mark">
135-
<div class="glyph" aria-hidden="true"><i></i><i></i><i></i></div>
136-
<h1 class="wordmark">agent<span>·templates</span></h1>
127+
<h1 class="wordmark">Agent templates</h1>
137128
</div>
138129
<p class="count">31 templates · 4 groups</p>
139130
<p class="tagline">A companion toolkit for coding agents: spec-driven workflows that turn an idea into a deployed change.</p>
@@ -144,7 +135,11 @@ <h1 class="wordmark">agent<span>·templates</span></h1>
144135
<nav class="bar">
145136
<div class="wrap">
146137
<a href="index.html">Home</a>
147-
<a href="agent-templates.html" aria-current="page">Agent Templates</a>
138+
<a href="index.html#now">Now</a>
139+
<a href="index.html#start">Start</a>
140+
<a href="index.html#playbooks">Playbooks</a>
141+
<a href="index.html#skills">Skills</a>
142+
<a href="agent-templates.html" aria-current="page">Templates</a>
148143
<a href="changelog.html">Changelog</a>
149144
</div>
150145
</nav>
@@ -164,8 +159,9 @@ <h2>Agent Templates</h2>
164159

165160
<footer>
166161
<div class="wrap">
167-
<p>Agent Templates is an unofficial companion to <a href="https://github.com/HustleCoding/pstack-explained" target="_blank" rel="noopener">pstack-explained</a>, documenting <a href="https://github.com/lionbenjamin/agent-templates" target="_blank" rel="noopener">lionbenjamin/agent-templates</a>.</p>
162+
<p>Agent Templates is an unofficial companion to <a href="index.html">pstack explained</a>, documenting <a href="https://github.com/lionbenjamin/agent-templates" target="_blank" rel="noopener">lionbenjamin/agent-templates</a>. It is not part of pstack.</p>
168163
<p>Source and deploy: <a href="https://github.com/HustleCoding/pstack-explained" target="_blank" rel="noopener">HustleCoding/pstack-explained</a>, live at this URL via GitHub Actions.</p>
164+
<p>Type: <a href="https://int10h.org/oldschool-pc-fonts/" target="_blank" rel="noopener">PxPlus IBM VGA 8x16</a> by VileR, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">CC BY-SA 4.0</a>.</p>
169165
</div>
170166
</footer>
171167

0 commit comments

Comments
 (0)