@@ -29,8 +29,21 @@ export default function GetStartedTab() {
2929 const [ origin , setOrigin ] = useState ( "" ) ;
3030 useEffect ( ( ) => { setOrigin ( window . location . origin ) ; } , [ ] ) ;
3131 const endpoints = getEndpoints ( origin ) ;
32+ const siteOrigin = origin || "https://skills.internetcomputer.org" ;
33+ const prompt = `Fetch ${ siteOrigin } ;
34+ const agentsMd = `# AI Agent Instructions
35+
36+ Tested implementation patterns for ICP development are available as agent skills.
37+ Before writing any ICP code, fetch the skills index and remember each skill's name and description:
38+ ${ siteOrigin }
39+
40+ When a task matches a skill's description, fetch its content on-demand from:
41+ ${ siteOrigin }
42+
43+ Skills contain correct dependency versions, configuration formats, and common pitfalls that prevent build failures.
44+ Always prefer skill guidance over general documentation when both cover the same topic.` ;
3245 return (
33- < div style = { { maxWidth : "860px" } } >
46+ < div >
3447 < div style = { { marginBottom : "48px" } } >
3548 < h2 style = { {
3649 fontSize : "clamp(28px, 5vw, 48px)" , fontWeight : 800 , color : "var(--text-primary)" ,
@@ -42,22 +55,21 @@ export default function GetStartedTab() {
4255 fontSize : "15px" , color : "var(--text-tertiary)" , margin : 0 , maxWidth : "560px" ,
4356 fontFamily : SANS_FONT , lineHeight : 1.6 ,
4457 } } >
45- Install directly into your agent, or fetch individual skills via HTTP . No auth, no keys.
58+ Give your coding agent ICP skills. No auth, no keys, no setup .
4659 </ p >
4760 </ div >
4861
49- { /* Install section */ }
62+ { /* Quick start: paste prompt */ }
5063 < div style = { { marginBottom : "48px" } } >
5164 < div style = { {
5265 fontSize : "11px" , fontWeight : 700 , color : "var(--text-faint)" ,
5366 letterSpacing : "2px" , textTransform : "uppercase" , marginBottom : "16px" ,
54- } } > Install into your agent </ div >
67+ } } > Try it now </ div >
5568
5669 < div style = { {
5770 border : "1px solid var(--border-default)" ,
5871 borderRadius : "10px" ,
5972 overflow : "hidden" ,
60- marginBottom : "8px" ,
6173 } } >
6274 < div style = { {
6375 padding : "14px 20px" ,
@@ -67,26 +79,102 @@ export default function GetStartedTab() {
6779 } } >
6880 < div style = { { flex : 1 , minWidth : 0 } } >
6981 < div style = { { fontSize : "14px" , fontWeight : 700 , color : "var(--text-primary)" , marginBottom : "2px" } } >
70- All skills (interactive)
82+ Paste into your agent
7183 </ div >
7284 < div className = "endpoint-desc" style = { { fontSize : "13px" , color : "var(--text-muted)" , fontFamily : SANS_FONT } } >
73- Pick which skills to install. Auto-detects your agent (Claude Code, Cursor, Copilot, and more) .
85+ Works in any agent session. Your agent fetches the skills index and pulls matching skills on demand .
7486 </ div >
7587 </ div >
7688 </ div >
7789 < div style = { {
78- padding : "10px 20px" ,
90+ padding : "14px 20px" ,
7991 background : "var(--bg-code)" ,
8092 display : "flex" , alignItems : "center" , gap : "8px" ,
8193 } } >
8294 < code style = { {
83- flex : 1 , fontSize : "12px " , color : "var(--text-secondary)" ,
84- whiteSpace : "nowrap" , overflow : "hidden" , textOverflow : "ellipsis" ,
95+ flex : 1 , fontSize : "13px " , color : "var(--text-secondary)" ,
96+ lineHeight : 1.5 ,
8597 minWidth : 0 ,
86- } } > npx skills add dfinity/icskills</ code >
87- < CopyButton text = "npx skills add dfinity/icskills" />
98+ overflowWrap : "break-word" ,
99+ } } > { prompt } </ code >
100+ < CopyButton text = { prompt } />
101+ </ div >
102+ </ div >
103+ </ div >
104+
105+ { /* Persistent: AGENTS.md */ }
106+ < div style = { { marginBottom : "48px" } } >
107+ < div style = { {
108+ fontSize : "11px" , fontWeight : 700 , color : "var(--text-faint)" ,
109+ letterSpacing : "2px" , textTransform : "uppercase" , marginBottom : "16px" ,
110+ } } > Set it and forget it</ div >
111+
112+ < div style = { {
113+ border : "1px solid var(--border-default)" ,
114+ borderRadius : "10px" ,
115+ overflow : "hidden" ,
116+ } } >
117+ < div style = { {
118+ padding : "14px 20px" ,
119+ background : "var(--bg-card-subtle)" ,
120+ display : "flex" , alignItems : "center" , gap : "12px" ,
121+ flexWrap : "wrap" ,
122+ } } >
123+ < div style = { { flex : 1 , minWidth : 0 } } >
124+ < div style = { { fontSize : "14px" , fontWeight : 700 , color : "var(--text-primary)" , marginBottom : "2px" } } >
125+ Add AGENTS.md to your repo
126+ </ div >
127+ < div className = "endpoint-desc" style = { { fontSize : "13px" , color : "var(--text-muted)" , fontFamily : SANS_FONT } } >
128+ Commit once, every agent session auto-discovers ICP skills. Works with Claude Code, Cursor, Copilot, and others.
129+ </ div >
130+ </ div >
131+ < div style = { { display : "flex" , gap : "6px" , flexShrink : 0 } } >
132+ < CopyButton text = { agentsMd } />
133+ < a href = "/AGENTS.md" download = "AGENTS.md"
134+ title = "Download AGENTS.md"
135+ style = { {
136+ display : "flex" , alignItems : "center" , justifyContent : "center" ,
137+ width : "26px" , height : "26px" , borderRadius : "4px" ,
138+ background : "var(--bg-card)" ,
139+ border : "1px solid var(--border-default)" ,
140+ color : "var(--text-muted)" ,
141+ cursor : "pointer" ,
142+ textDecoration : "none" ,
143+ flexShrink : 0 ,
144+ } } >
145+ < svg width = "14" height = "14" viewBox = "0 0 16 16" fill = "none" stroke = "currentColor" stroke-width = "1.5" stroke-linecap = "round" stroke-linejoin = "round" >
146+ < path d = "M8 2v8M4.5 7.5 8 11l3.5-3.5M2.5 13.5h11" />
147+ </ svg >
148+ </ a >
149+ </ div >
150+ </ div >
151+ < div style = { {
152+ padding : "14px 20px" ,
153+ background : "var(--bg-code)" ,
154+ } } >
155+ < code style = { {
156+ fontSize : "13px" , color : "var(--text-secondary)" ,
157+ lineHeight : 1.5 ,
158+ whiteSpace : "pre-wrap" ,
159+ overflowWrap : "break-word" ,
160+ } } > { agentsMd } </ code >
88161 </ div >
89162 </ div >
163+ < p style = { {
164+ fontSize : "13px" , color : "var(--text-muted)" , margin : "12px 0 0 0" ,
165+ fontFamily : SANS_FONT , lineHeight : 1.6 ,
166+ } } >
167+ For Claude Code, also add a < code style = { { fontSize : "12px" , color : "var(--text-tertiary)" } } > CLAUDE.md</ code > that
168+ reads: < code style = { { fontSize : "12px" , color : "var(--text-tertiary)" } } > Read and follow the instructions in AGENTS.md.</ code >
169+ </ p >
170+ </ div >
171+
172+ { /* CLI install */ }
173+ < div style = { { marginBottom : "48px" } } >
174+ < div style = { {
175+ fontSize : "11px" , fontWeight : 700 , color : "var(--text-faint)" ,
176+ letterSpacing : "2px" , textTransform : "uppercase" , marginBottom : "16px" ,
177+ } } > Use the CLI</ div >
90178
91179 < div style = { {
92180 border : "1px solid var(--border-default)" ,
@@ -102,24 +190,24 @@ export default function GetStartedTab() {
102190 } } >
103191 < div style = { { flex : 1 , minWidth : 0 } } >
104192 < div style = { { fontSize : "14px" , fontWeight : 700 , color : "var(--text-primary)" , marginBottom : "2px" } } >
105- Single skill
193+ All skills
106194 </ div >
107195 < div className = "endpoint-desc" style = { { fontSize : "13px" , color : "var(--text-muted)" , fontFamily : SANS_FONT } } >
108- Install one skill by name. Includes any reference files.
196+ Auto-detects your agents (Claude Code, Cursor, Copilot, and more) and writes the skills into their rules files.
109197 </ div >
110198 </ div >
111199 </ div >
112200 < div style = { {
113- padding : "10px 20px" ,
201+ padding : "14px 20px" ,
114202 background : "var(--bg-code)" ,
115203 display : "flex" , alignItems : "center" , gap : "8px" ,
116204 } } >
117205 < code style = { {
118- flex : 1 , fontSize : "12px" , color : "var(--text-secondary)" ,
119- whiteSpace : "nowrap" , overflow : "hidden" , textOverflow : "ellipsis" ,
206+ flex : 1 , fontSize : "13px" , color : "var(--text-secondary)" ,
120207 minWidth : 0 ,
121- } } > npx skills add dfinity/icskills --skill ckbtc</ code >
122- < CopyButton text = "npx skills add dfinity/icskills --skill ckbtc" />
208+ overflowWrap : "break-word" ,
209+ } } > npx skills add dfinity/icskills</ code >
210+ < CopyButton text = "npx skills add dfinity/icskills" />
123211 </ div >
124212 </ div >
125213
@@ -136,24 +224,24 @@ export default function GetStartedTab() {
136224 } } >
137225 < div style = { { flex : 1 , minWidth : 0 } } >
138226 < div style = { { fontSize : "14px" , fontWeight : 700 , color : "var(--text-primary)" , marginBottom : "2px" } } >
139- All skills (no prompts)
227+ Single skill
140228 </ div >
141229 < div className = "endpoint-desc" style = { { fontSize : "13px" , color : "var(--text-muted)" , fontFamily : SANS_FONT } } >
142- Install everything into all detected agents. No interactive prompts .
230+ Install one skill by name. Includes any reference files .
143231 </ div >
144232 </ div >
145233 </ div >
146234 < div style = { {
147- padding : "10px 20px" ,
235+ padding : "14px 20px" ,
148236 background : "var(--bg-code)" ,
149237 display : "flex" , alignItems : "center" , gap : "8px" ,
150238 } } >
151239 < code style = { {
152- flex : 1 , fontSize : "12px" , color : "var(--text-secondary)" ,
153- whiteSpace : "nowrap" , overflow : "hidden" , textOverflow : "ellipsis" ,
240+ flex : 1 , fontSize : "13px" , color : "var(--text-secondary)" ,
154241 minWidth : 0 ,
155- } } > npx skills add dfinity/icskills --all</ code >
156- < CopyButton text = "npx skills add dfinity/icskills --all" />
242+ overflowWrap : "break-word" ,
243+ } } > npx skills add dfinity/icskills --skill ckbtc</ code >
244+ < CopyButton text = "npx skills add dfinity/icskills --skill ckbtc" />
157245 </ div >
158246 </ div >
159247 </ div >
0 commit comments